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

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