fix(timeline-event): fixed overflowed buttons, event expansion on focus

app/src/plugins/app@vendor/vue-cal/event.vue

@@ -67,6 +67,19 @@ export default {
 		 * Do not prevent propagation to trigger cell mousedown which highlights the cell if not highlighted.
 		 */
 		onMouseDown(e, touch = false) {
+			let targetElement
+
+			if (e.target.nodeName == 'BUTTON') {
+				targetElement = e.target
+			} else if (e.srcElement.nodeName == 'IMG') {
+				targetElement = e.target.parentElement
+			}
+
+			if (targetElement?.classList?.contains('v-btn__content') || e?.target?.nodeName == 'BUTTON') {
+				e.preventDefault()
+				return
+			}
+
 			// Prevent a double mouse down on touch devices.
 			if ("ontouchstart" in window && !touch) return false;
 			const { clickHoldAnEvent, focusAnEvent, resizeAnEvent, dragAnEvent } =

app/src/plugins/tm@dashboard/_components/a-timeline-event.vue

@@ -22,7 +22,10 @@
 						</template>
 					</v-tooltip>
 				</template>
+			</div>
 
+			<div class="event__footer-wrapper" :style="{ backgroundColor: eventColor.backgroundColor }">
+				<div class="event__footer-wrapper__top">
 					<div class="d-flex align-center event-details event-initials-wrapper">
 						<div class="event-initials d-flex justify-center align-center" :style="{ borderColor: eventColor.color }">
 							<small class="text-inherit">{{ props.event.initials }}</small>
@@ -51,7 +54,6 @@
 					</div>
 				</div>
 
-			<div>
 				<div class="event__office-footer" v-if="isOfficeEvent">
 					<img :src="office365" alt="" />
 				</div>
@@ -62,15 +64,15 @@
 					</template>
 
 					<template v-else-if="event.type == 'adhoc'">
-						<v-btn rounded class="event__footer__button me-2" @click.stop="emits('edit-blocker', props.event)"><img :src="pencil" alt="" /></v-btn>
+						<v-btn rounded class="event__footer__button me-2" @click.stop.prevent="emits('edit-blocker', props.event)"><img :src="pencil" alt="" /></v-btn>
-						<v-btn rounded class="event__footer__button me-2" @click.stop="emits('delete-blocker', props.event)"><img :src="bin" alt="" /></v-btn>
+						<v-btn rounded class="event__footer__button me-2" @click.stop.prevent="emits('delete-blocker', props.event)"><img :src="bin" alt="" /></v-btn>
 					</template>
 
 					<template v-else-if="props.event.type == 'subtask'">
 						<v-btn rounded class="event__footer__button me-2" :class="{ completed: props.event.subtask?.is_finished }" @click.stop="emits('complete-task', props.event)"><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)"><img :src="checkmark" alt="" /></v-btn>
-						<v-btn rounded class="event__footer__button me-2" @click.stop="emits('edit-task', props.event)"><img :src="eye" alt="" /></v-btn>
+						<v-btn rounded class="event__footer__button me-2" @click.stop.prevent="emits('edit-task', props.event)"><img :src="eye" alt="" /></v-btn>
-						<v-btn rounded class="event__footer__button me-2" @click.stop="emits('delete-timeblock-in-task', props.event)"><img :src="bin" alt="" /></v-btn>
+						<v-btn rounded class="event__footer__button me-2" @click.stop.prevent="emits('delete-timeblock-in-task', props.event)"><img :src="bin" alt="" /></v-btn>
 					</template>
 				</div>
 			</div>
@@ -158,6 +160,16 @@ const isOfficeEvent: ComputedRef<boolean> = computed(() => {
 		padding: 20px 10px
 		width: 100%
 
+	&__footer-wrapper
+		position: absolute
+		bottom: 0
+		left: 0
+		right: 0
+		border-top: 1px solid rgba(33, 33, 33, 0.08)
+
+		&__top
+			padding: 10px 10px 0 10px
+
 	&__footer
 		flex-flow: row wrap
 		justify-content: center

app/src/plugins/tm@dashboard/_components/z-timeline.vue

@@ -484,9 +484,16 @@ export default {
 					&.vuecal__event--focus
 						z-index: 100 !important
 						min-height: 350px !important
+						height: fit-content !important
 						width: 100% !important
 						left: 0 !important
 
+						.event__footer-wrapper
+							position: relative
+
+							&__top
+								padding: 10px 0 0 0
+
 					&:not(.vuecal__event--focus)
 						&:has(.micro-event) .event__body
 							padding: 5px !important

app/src/plugins/tm@modal/task/z-task-modal.vue

@@ -175,7 +175,7 @@
               v-for="(employee, index) in subtask.employees"
               :key="`employee-${index}`"
               class="splitted-inputs remove-employee"
-              :class="{ 'hide-arrow': employee.id }"
+              :class="{ 'hide-arrow': employee?.id }"
             >
               <v-autocomplete
                 :custom-filter="customFilter"
@@ -854,7 +854,7 @@ export default {
 
         const lastEmployee =
           this.subtask.employees[this.subtask.employees.length - 1];
-        if (lastEmployee.id || lastEmployee.duration)
+        if (lastEmployee?.id || lastEmployee?.duration)
           this.subtask.employees.push({});
       },
       deep: true,