From 48f4b0b9565a7ead0a1dec9b81ec4806ca801e2c Mon Sep 17 00:00:00 2001
From: Peter Ringelmann <peter.ringelmann@nextcloud.com>
Date: Wed, 1 Apr 2026 15:24:47 +0200
Subject: [PATCH] fix: improve UI layout of modal -e Signed-off-by: Peter
 Ringelmann <peter.ringelmann@nextcloud.com>

---
 .../src/components/Users/EditUserDialog.vue   | 13 +---------
 .../src/components/Users/UserFormFields.vue   | 25 +------------------
 .../src/components/Users/UserFormGroups.vue   | 16 +++++++++++-
 3 files changed, 17 insertions(+), 37 deletions(-)

diff --git a/apps/settings/src/components/Users/EditUserDialog.vue b/apps/settings/src/components/Users/EditUserDialog.vue
index 7e69ea3bcd2..68b6fc795b8 100644
--- a/apps/settings/src/components/Users/EditUserDialog.vue
+++ b/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'),
diff --git a/apps/settings/src/components/Users/UserFormFields.vue b/apps/settings/src/components/Users/UserFormFields.vue
index c6426fd2eb7..80b448a4b6e 100644
--- a/apps/settings/src/components/Users/UserFormFields.vue
+++ b/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;
diff --git a/apps/settings/src/components/Users/UserFormGroups.vue b/apps/settings/src/components/Users/UserFormGroups.vue
index db7d5bac6aa..5e1bc8e5e7c 100644
--- a/apps/settings/src/components/Users/UserFormGroups.vue
+++ b/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>