fix: added a label element to the NcSelect in update settings

Signed-off-by: Eduardo Morales <[email protected]> Signed-off-by: nextcloud-command <[email protected]> [skip ci]
nextcloud · Jan 27, 2024 · 5322bca · 5322bca
1 parent 787b2a3
commit 5322bca
Showing 1 changed file with 10 additions and 4 deletions.
diff --git a/apps/updatenotification/src/components/UpdateNotification.vue b/apps/updatenotification/src/components/UpdateNotification.vue
@@ -131,8 +131,9 @@
 			<em v-html="noteDelayedStableString" />
 		</p>
 
-		<h4>{{ t('updatenotification', 'Notify members of the following groups about available updates:') }}</h4>
 		<NcSelect v-model="notifyGroups"
+			id="notify-members-settings-select-wrapper"
+			:input-label="t('updatenotification', 'Notify members of the following groups about available updates:')"
 			:options="groups"
 			:multiple="true"
 			label="displayname"
@@ -483,9 +484,6 @@ export default {
 				}
 			}
 		}
-		h4 {
-			margin-block-end: 0.7rem;
-		}
 		.update-channel-selector {
 			display: flex;
 			align-items: center;
@@ -547,5 +545,13 @@ export default {
 	.update-menu .icon-star:focus {
 		background-image: var(--icon-starred);
 	}
+	/* override NcSelect styling so that label can have correct width */
+	#notify-members-settings-select-wrapper {
+		width: fit-content;
+
+		.vs__dropdown-toggle {
+			min-width: 100%;
+		}
+	}
 }
 </style>