refactor(timeline): streamline event display and improve layout consistency across components

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

@@ -24,8 +24,6 @@
 				</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>
@@ -46,11 +44,11 @@
 			<div v-if="['office365'].includes(event.type)" class="d-flex align-center mt-1">
 				<v-icon icon="mdi-pin-outline" size="small" />
 				<small v-if="props.event?.subtask.office365_location" :style="{ color: eventColor.color }" class="ml-1">{{ props.event?.subtask.office365_location }}</small>
-						<v-tooltip v-else text="Miesto" location="bottom">
+				<!-- <v-tooltip v-else text="Miesto" location="bottom">
 					<template v-slot:activator="{ props }">
 						<small class="cursor-pointer ml-1" :style="{ color: eventColor.color }" v-if="!props.event?.subtask?.office365_location" v-bind="props">{{ office365_location }}*</small>
 					</template>
-						</v-tooltip>
+				</v-tooltip> -->
 			</div>
 		</div>
 
@@ -58,7 +56,7 @@
 			<img :src="office365" alt="" />
 		</div>
 
-				<div class="event__footer d-flex">
+		<div class="event__footer d-flex" :style="{ backgroundColor: eventColor.backgroundColor }">
 			<template v-if="isOfficeEvent">
 				<v-btn rounded class="event__footer__button me-2" @click.stop="emits('edit-task', props.event)"><img :src="eye" alt="" /></v-btn>
 			</template>
@@ -76,8 +74,6 @@
 			</template>
 		</div>
 	</div>
-		</div>
-	</div>
 </template>
 
 <script lang="ts" setup>
@@ -160,15 +156,15 @@ 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)
+	// &__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
+	// 	&__top
+	// 		padding: 10px 10px 0 10px
 
 	&__footer
 		flex-flow: row wrap

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

@@ -24,7 +24,10 @@
       @event-focus="eventFocused"
     >
       <template v-slot:split-label="{ split }">
-        <div class="w-[120px] h-100 d-flex flex-column">
+        <div
+          class="h-100 d-flex flex-column"
+          style="width: 100%; margin-right: 10px; margin-left: 10px"
+        >
           <span v-if="split.date" class="d-flex align-center">
             <img
               v-if="split.isHomeoffice"
@@ -52,14 +55,15 @@
             class="unscheduled-time d-flex align-center text-left"
             :class="{ 'vuecal__cell-split--weekend': split.isWeekend }"
           >
-            <div
-              class="unscheduled-time-initials d-flex align-center justify-center"
-            >
+            <div class="unscheduled-time-initials">
               <p>{{ split.initials }}</p>
             </div>
             <div class="text-wrap me-4">
               <p class="mb-0 mt-0 unscheduled-time-name">
-                {{ split.fullname }}
+                {{ split.name }}
+              </p>
+              <p class="mb-0 mt-0 unscheduled-time-name">
+                {{ split.surname }}
               </p>
               <h1 class="mb-0 mt-0">{{ split.unscheduledTime }} h</h1>
               <h1 class="mb-0 mt-0" style="font-weight: 400">
@@ -454,12 +458,13 @@ export default {
 				width: calc( 100% - 20px )
 
 			.vuecal__cell-split
-				margin-right: 20px
+				margin-right: 10px
+				margin-left: 10px
 
 			.day-split-header
 				height: fit-content
 				min-height: 100%
-				padding-right: 20px
+				// margin-left: 10px
 
 				.weekday-label
 					justify-content: start !important
@@ -477,6 +482,15 @@ export default {
 					border-radius: 24px
 					padding: 10px 10px
 					margin-top: 10px
+					container-type: inline-size
+					width: 100%
+
+					@container (max-width: 120px)
+						.unscheduled-time-name
+							width: 60px
+							overflow: hidden
+							text-overflow: ellipsis
+							white-space: nowrap
 
 					.text-wrap
 						width: min-content
@@ -491,10 +505,14 @@ export default {
 							line-height: normal
 
 					.unscheduled-time-initials
-						width: 30px
-						height: 30px
+						display: flex
+						align-items: center
+						justify-content: center
+						width: 30px !important
+						height: 30px !important
 						background: #6200EE
 						border-radius: 50%
+						flex-shrink: 0
 
 						p
 							font-weight: 400
@@ -548,17 +566,10 @@ 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@dashboard/tasks/tasks.vue

@@ -99,6 +99,8 @@ export default {
 
 				days.push({
 					id: i + 1,
+					name: this.filter.employee.name,
+					surname: this.filter.employee.surname,
 					fullname: `${this.filter.employee.name} ${this.filter.employee.surname}`,
 					initials: this.filter.employee.name.charAt(0).toUpperCase() + this.filter.employee.surname.charAt(0).toUpperCase(),
 					unscheduledTime: (unscheduledTime / 60).toFixed(1),

app/src/plugins/tm@dashboard/teams/_mixins/TeamsCalendar.mixin.ts

@@ -60,6 +60,7 @@ export default {
 				days.push({
 					id: index + 1,
 					name: employee.name,
+					surname: employee.surname,
 					employee_id: employee.id,
 					date: this.filter.start,
 					fullname: `${employee.name} ${employee.surname}`,