From eea9900e56d7735da6058bd94323e8dfd0bb1384 Mon Sep 17 00:00:00 2001
From: Eduardo Morales <emoral435@gmail.com>
Date: Wed, 24 Jan 2024 12:38:31 -0600
Subject: [PATCH] fix: added a label element to the NcSelect in update settings

Signed-off-by: Eduardo Morales <emoral435@gmail.com>

Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>

[skip ci]
---
 .../src/components/UpdateNotification.vue          | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/apps/updatenotification/src/components/UpdateNotification.vue b/apps/updatenotification/src/components/UpdateNotification.vue
index 678ce7329d13f..16a98799a8647 100644
--- 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>