From 5b4e307e249c9651cb421fbe041958299c74d4bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matej=20Glasn=C3=A1k?= <matej.glasnak@blume.sk>
Date: Wed, 11 Feb 2026 21:47:32 +0100
Subject: [PATCH] fix(timeline): fixed buttons in events to work on mobile

---
 .../_components/a-timeline-event.vue          | 37 ++++++++++++++++---
 1 file changed, 32 insertions(+), 5 deletions(-)

diff --git a/app/src/plugins/tm@dashboard/_components/a-timeline-event.vue b/app/src/plugins/tm@dashboard/_components/a-timeline-event.vue
index bfd6c42..62cc542 100644
--- a/app/src/plugins/tm@dashboard/_components/a-timeline-event.vue
+++ b/app/src/plugins/tm@dashboard/_components/a-timeline-event.vue
@@ -157,26 +157,30 @@
           rounded
           class="event__footer__button me-2"
           :class="{ completed: props.event.subtask?.is_finished }"
-          @click.stop="emits('complete-task', props.event)"
+          @click.stop="handleCompleteTask"
+          @touchend.stop.prevent="handleTouchEnd($event, 'complete-task')"
           ><img :src="checkmarkDouble" alt=""
         /></v-btn>
         <v-btn
           rounded
           class="event__footer__button me-2"
           :class="{ completed: props.event._timeblock_is_finished }"
-          @click.stop="emits('toggle-timeblock-is-finished', props.event)"
+          @click.stop="handleToggleTimeblock"
+          @touchend.stop.prevent="handleTouchEnd($event, 'toggle-timeblock')"
           ><img :src="checkmark" alt=""
         /></v-btn>
         <v-btn
           rounded
           class="event__footer__button me-2"
-          @click.stop.prevent="emits('edit-task', props.event)"
+          @click.stop.prevent="handleEditTask"
+          @touchend.stop.prevent="handleTouchEnd($event, 'edit-task')"
           ><img :src="eye" alt=""
         /></v-btn>
         <v-btn
           rounded
           class="event__footer__button me-2"
-          @click.stop.prevent="emits('delete-timeblock-in-task', props.event)"
+          @click.stop.prevent="handleDeleteTimeblock"
+          @touchend.stop.prevent="handleTouchEnd($event, 'delete-timeblock')"
           ><img :src="bin" alt=""
         /></v-btn>
       </template>
@@ -193,7 +197,7 @@ import {
   pencil,
   office365,
 } from '@/plugins/app/_img';
-import { computed, ComputedRef, defineProps, defineEmits } from 'vue';
+import { computed, ComputedRef } from 'vue';
 
 const props = defineProps<{
   event: any;
@@ -208,6 +212,25 @@ const emits = defineEmits<{
   (e: 'delete-timeblock-in-task', event: any): void;
 }>();
 
+// iOS: touchend triggers the action (click often doesn't fire on touch devices)
+const handleTouchEnd = (event: TouchEvent, action: string) => {
+  event.preventDefault();
+  event.stopPropagation();
+  if (action === 'complete-task') emits('complete-task', props.event);
+  else if (action === 'toggle-timeblock')
+    emits('toggle-timeblock-is-finished', props.event);
+  else if (action === 'edit-task') emits('edit-task', props.event);
+  else if (action === 'delete-timeblock')
+    emits('delete-timeblock-in-task', props.event);
+};
+
+const handleCompleteTask = () => emits('complete-task', props.event);
+const handleToggleTimeblock = () =>
+  emits('toggle-timeblock-is-finished', props.event);
+const handleEditTask = () => emits('edit-task', props.event);
+const handleDeleteTimeblock = () =>
+  emits('delete-timeblock-in-task', props.event);
+
 const deadline: ComputedRef<string | undefined> = computed(() => {
   if (!props.event.subtask) return undefined;
 
@@ -308,6 +331,10 @@ const isOfficeEvent: ComputedRef<boolean> = computed(() => {
 			&.completed
 				background: #06dece
 
+			// Disable pointer events on all child elements so button receives touch events
+			:deep(*)
+				pointer-events: none
+
 			img
 				width: 18px
 </style>