Merge pull request #43158 from nextcloud/backport/43094/stable28

[stable28] fix: added a label element to the NcSelect in update settings
nextcloud · Feb 2, 2024 · 7dc0234 · 7dc0234
2 parents dce5df4 + f59ef7b
commit 7dc0234
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 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>