fix: improve UI layout of modal

-e
Signed-off-by: Peter Ringelmann <peter.ringelmann@nextcloud.com>

apps/settings/src/components/Users/EditUserDialog.vue

@@ -7,7 +7,7 @@
 	<NcDialog
 		class="edit-dialog"
 		size="small"
-		:name="t('settings', 'Edit account')"
+		:name="t('settings', 'Edit account') + ' - ' + user.id"
 		out-transition
 		@closing="$emit('closing')">
 		<form
@@ -202,19 +202,8 @@ export default {
 			return this.$store.getters.getServerData
 		},
 
-		/**
-		 * Field configuration for the edit dialog.
-		 * Username is shown but read-only; password visibility depends
-		 * on the backend's capabilities and admin permissions.
-		 */
 		fieldConfig() {
 			return {
-				username: {
-					show: true,
-					label: t('settings', 'Account name'),
-					readonly: true,
-				},
-
 				password: {
 					show: this.settings.canChangePassword && this.user.backendCapabilities.setPassword,
 					label: t('settings', 'New password'),

apps/settings/src/components/Users/UserFormFields.vue

@@ -5,15 +5,8 @@
 
 <template>
 	<div class="user-form-fields">
-		<div
-			v-if="fieldConfig.username?.show && fieldConfig.username?.readonly"
-			class="user-form-fields__item user-form-fields__readonly"
-			data-test="username">
-			<label class="user-form-fields__readonly-label">{{ fieldConfig.username?.label }}</label>
-			<span class="user-form-fields__readonly-value">{{ formData.username }}</span>
-		</div>
 		<NcTextField
-			v-else-if="fieldConfig.username?.show"
+			v-if="fieldConfig.username?.show"
 			ref="username"
 			v-model="formData.username"
 			class="user-form-fields__item"
@@ -176,22 +169,6 @@ export default {
 		}
 	}
 
-	&__readonly {
-		padding: 4px 0;
-	}
-
-	&__readonly-label {
-		display: block;
-		font-size: 13px;
-		color: var(--color-text-maxcontrast);
-		margin-bottom: 2px;
-	}
-
-	&__readonly-value {
-		display: block;
-		font-weight: bold;
-	}
-
 	&__hint {
 		color: var(--color-text-maxcontrast);
 		margin-top: 8px;

apps/settings/src/components/Users/UserFormGroups.vue

@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<div>
+	<div class="user-form-groups">
 		<div class="user-form__item">
 			<NcSelect
 				v-model="formData.groups"
@@ -127,3 +127,17 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.user-form-groups {
+	width: 100%;
+}
+
+.user-form__item {
+	width: 100%;
+}
+
+.user-form__select {
+	width: 100%;
+}
+</style>