From 1f13c3c71b1ed8def3ba3297d02ecd0f8fd76015 Mon Sep 17 00:00:00 2001
From: Norman Niati <norman.niati@icloud.com>
Date: Tue, 19 May 2026 14:39:30 +0200
Subject: [PATCH] fix(plugin-id/ui): keep user list group chips on a single
 line

Per Fabrice's review (18 mai 13h30): when a user has many groups, the
chips column was wrapping onto multiple lines, breaking vertical
alignment across rows in the user list. Constrain the chips container
to single-line (display: flex; flex-wrap: nowrap; overflow: hidden) so
chips overflow horizontally instead of pushing rows down.
---
 ui/src/views/UserListView.vue | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/ui/src/views/UserListView.vue b/ui/src/views/UserListView.vue
index a275852..740a11f 100644
--- a/ui/src/views/UserListView.vue
+++ b/ui/src/views/UserListView.vue
@@ -39,10 +39,12 @@
         {{ item.mails?.[0] || '' }}
       </template>
       <template #item.groups="{ item }">
-        <v-chip v-for="g in (item.groups || []).slice(0, 3)" :key="g.name || g" size="small" class="mr-1">{{ g.name || g }}</v-chip>
-        <span v-if="(item.groups || []).length > 3" class="text-caption text-medium-emphasis">
-          +{{ item.groups.length - 3 }}
-        </span>
+        <div class="groups-cell">
+          <v-chip v-for="g in (item.groups || []).slice(0, 3)" :key="g.name || g" size="small" class="mr-1">{{ g.name || g }}</v-chip>
+          <span v-if="(item.groups || []).length > 3" class="text-caption text-medium-emphasis">
+            +{{ item.groups.length - 3 }}
+          </span>
+        </div>
       </template>
       <template #item.locked="{ item }">
         <v-icon v-if="item.locked" color="error" size="small">mdi-lock</v-icon>
@@ -196,4 +198,15 @@ onMounted(() => {
   max-width: 300px;
   flex: 1 1 200px;
 }
+
+/* Keep the groups column on a single line so rows stay vertically
+   aligned when a user has many groups. Chips overflow horizontally
+   instead of wrapping. */
+.groups-cell {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  overflow: hidden;
+  white-space: nowrap;
+}
 </style>