From d6418c91c98fed2c521d8d0027fdadd3b37f2b83 Mon Sep 17 00:00:00 2001
From: Richard Steinmetz <richard@steinmetz.cloud>
Date: Mon, 19 Feb 2024 15:04:44 +0100
Subject: [PATCH] Fix calendar picker options wrapping and overflowing

Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>
---
 css/app-sidebar.scss                     | 6 ++++++
 src/components/Shared/CalendarPicker.vue | 9 +++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/css/app-sidebar.scss b/css/app-sidebar.scss
index d571db5777..3afc6c2abf 100644
--- a/css/app-sidebar.scss
+++ b/css/app-sidebar.scss
@@ -604,6 +604,10 @@
 		.v-select {
 			min-width: unset !important;
 		}
+
+		&__input {
+			width: 100%;
+		}
 	}
 
 	.property-color {
@@ -770,6 +774,7 @@
 .calendar-picker-option {
 	display: flex;
 	align-items: center;
+	overflow: hidden;
 
 	&__color-indicator {
 		width: 12px;
@@ -784,6 +789,7 @@
 	&__label {
 		overflow: hidden;
 		text-overflow: ellipsis;
+		white-space: nowrap;
 		flex-grow: 1;
 	}
 
diff --git a/src/components/Shared/CalendarPicker.vue b/src/components/Shared/CalendarPicker.vue
index ba818091d3..c65cd2b306 100644
--- a/src/components/Shared/CalendarPicker.vue
+++ b/src/components/Shared/CalendarPicker.vue
@@ -121,8 +121,13 @@ export default {
 }
 </style>
 
-<style>
+<style lang="scss">
+.vs__search {
+	// Prevent search from collapsing the actual picked option
+	flex-basis: 0;
+}
+
 .vs__dropdown-menu {
-  z-index: 10000010 !important;
+	z-index: 10000010 !important;
 }
 </style>