Fix calendar picker options wrapping and overflowing

Signed-off-by: Richard Steinmetz <[email protected]>
nextcloud · Feb 19, 2024 · d6418c9 · d6418c9
1 parent 2a197b4
commit d6418c9
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git 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
@@ -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>