shrink calendar

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

@@ -17,14 +17,14 @@
 			:scroll-to-hour="calConfig.scrollHour"
 			:split-days="splits"
 			:sticky-split-labels="true"
-			:min-split-width="220"
+			:min-split-width="150"
 			@ready="onReady()"
 			@view-change="weekChanged"
 			@event-drop="eventMoved"
 			@event-focus="eventFocused"
 		>
 			<template v-slot:split-label="{ split }">
-				<div class="w-100 h-100 d-flex flex-column">
+				<div class="colWidth h-100 d-flex flex-column">
 					<span v-if="split.date" class="d-flex align-center">
 						<img v-if="split.isHomeoffice" :src="require('@/plugins/app/_img/icons/home.svg')" class="mr-2">
 						<p class="weekday-label">{{ getHeadingDate(split.date) }}</p>
@@ -39,10 +39,10 @@
 					</span>
 
 					<div 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 me-4">
+						<div class="unscheduled-time-initials d-flex align-center justify-center">
 							<p>{{ split.initials }}</p>
 						</div>
-						<div>
+						<div class="text-wrap me-4">
 							<p class="mb-0 mt-0 unscheduled-time-name">{{split.fullname}}</p>
 							<h1 class="mb-0 mt-0">{{split.unscheduledTime}} h</h1>
 						</div>
@@ -58,14 +58,14 @@
 			</template>
 
 			<template v-slot:event="{ event }">
-				<div v-if="event.type == 'non-working-hours'" class="custom-event-body non-working-event w-100 h-100 d-flex flex-column justify-center">
+				<div v-if="event.type == 'non-working-hours'" class="custom-event-body non-working-event colWidth h-100 d-flex flex-column justify-center">
 					<div class="d-flex justify-center align-center">
 						<v-icon icon="mdi-cancel" color="black"></v-icon>
 						<h3 class="mb-0 ms-2">{{ event.title }}</h3>
 					</div>
 				</div>
 
-				<div v-else-if="['subtask', 'blocker', 'adhoc', 'vacation', 'free_day'].includes(event.type)" class="custom-event-body w-100 h-100 d-flex flex-column justify-space-between" :class="{'short-event' : getEventLength(event) <= 9000000, 'mini-event' : getEventLength(event) <= 5400000, 'micro-event' : getEventLength(event) <= 3600000}" :style="{backgroundColor: event._timeblock_is_finished || event.subtask.is_finished ? '#dedfe0' : event.color || event.subtask.color}">
+				<div v-else-if="['subtask', 'blocker', 'adhoc', 'vacation', 'free_day'].includes(event.type)" class="custom-event-body colWidth h-100 d-flex flex-column justify-space-between" :class="{'short-event' : getEventLength(event) <= 9000000, 'mini-event' : getEventLength(event) <= 5400000, 'micro-event' : getEventLength(event) <= 3600000}" :style="{backgroundColor: event._timeblock_is_finished || event.subtask.is_finished ? '#dedfe0' : event.color || event.subtask.color}">
 					<div class="event-content" :class="{'is-blocker': event.isBlocker}"> 
 						<template v-if="event.type == 'subtask'">
 							<small v-if="event.subtask.project_code" class="project-code">{{ event.subtask.project_code }}</small>
@@ -281,6 +281,12 @@ export default {
 </script>
 
 <style lang="sass" scoped>
+	.colWidth
+		width: 130px
+
+		@media (min-width: 1476px)
+			width: 100% !important
+
 	.vuecal
 		box-shadow: none !important
 
@@ -365,19 +371,27 @@ export default {
 					padding: 10px 15px
 					margin-top: 10px
 
-					.unscheduled-time-name
-						font-weight: 400
-						font-size: 15px
+					.text-wrap
+						width: min-content
+						margin-left: 12px
+
+						h1
+							font-size: 18px
+
+						p
+							font-weight: 400
+							font-size: 15px
+							line-height: normal
 
 					.unscheduled-time-initials
-						width: 50px
-						height: 50px
+						width: 30px
+						height: 30px
 						background: #6200EE
 						border-radius: 50%
 
 						p
 							font-weight: 400
-							font-size: 20px
+							font-size: 15px
 							color: white
 
 
@@ -412,6 +426,7 @@ export default {
 				.vuecal__event
 					border-radius: 16px
 					// padding: 20px 10px
+					min-height: 200px !important
 					text-align: left
 					background: rgba(248, 248, 248, 1)
 					min-height: 40px
@@ -516,11 +531,15 @@ export default {
 							font-size: 11px
 
 					.event-footer
+						flex-flow: row wrap
+						justify-content: center
+						alight-items: center
 						padding-top: 15px
 						border-top: 1px solid rgba(33, 33, 33, 0.08)
 
 						.event-footer-button
 							box-shadow: none !important
+							margin-bottom: 8px
 							padding: 9px !important
 							min-height: fit-content
 							height: fit-content