From 6985f433b076f2637565357aa73a5d53f227b9e8 Mon Sep 17 00:00:00 2001
From: Norman Niati <norman.niati@icloud.com>
Date: Thu, 28 May 2026 10:29:44 +0200
Subject: [PATCH 1/5] feat(ui): disable native browser autocomplete on
 User/Company/Group inputs

Adds autocomplete="off" to v-autocomplete and v-combobox inputs in
UserEditDialog, CompanyEditView, GroupEditView and GroupMembersView to
suppress the browser's autofill suggestions overlaying the Vuetify
dropdown.

Refs ligoj/plugin-id#36
---
 ui/src/views/CompanyEditView.vue  | 1 +
 ui/src/views/GroupEditView.vue    | 3 ++-
 ui/src/views/GroupMembersView.vue | 2 +-
 ui/src/views/UserEditDialog.vue   | 6 +++---
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/ui/src/views/CompanyEditView.vue b/ui/src/views/CompanyEditView.vue
index a2dfbd4..e07a2f0 100644
--- a/ui/src/views/CompanyEditView.vue
+++ b/ui/src/views/CompanyEditView.vue
@@ -29,6 +29,7 @@
             class="mb-2"
             no-filter
             clearable
+            autocomplete="off"
             @update:search="onScopeSearch"
           >
             <template #item="{ props: itemProps, item }">
diff --git a/ui/src/views/GroupEditView.vue b/ui/src/views/GroupEditView.vue
index 35a0140..6c3397c 100644
--- a/ui/src/views/GroupEditView.vue
+++ b/ui/src/views/GroupEditView.vue
@@ -10,7 +10,7 @@
       <v-card-text>
         <v-form ref="formRef" @submit.prevent="save">
           <v-text-field v-model="form.name" :label="t('common.name')" :rules="[rules.required]" :disabled="isEdit" variant="outlined" class="mb-2" />
-          <v-autocomplete v-model="form.scope" :label="t('group.scope')" :items="availableScopes" :loading="scopesLoading" clearable variant="outlined" class="mb-2" />
+          <v-autocomplete v-model="form.scope" :label="t('group.scope')" :items="availableScopes" :loading="scopesLoading" clearable variant="outlined" class="mb-2" autocomplete="off" />
           <!-- Parent group: lazy server-backed autosuggest. No groups are
                loaded until the dropdown opens (chantier H, Fabrice review) —
                the former mount-time bulk GET doesn't scale to 100k+ groups. -->
@@ -28,6 +28,7 @@
             class="mb-2"
             no-filter
             clearable
+            autocomplete="off"
             @update:menu="onParentMenu"
             @update:search="onParentSearch"
           >
diff --git a/ui/src/views/GroupMembersView.vue b/ui/src/views/GroupMembersView.vue
index 24f2a56..2ffea90 100644
--- a/ui/src/views/GroupMembersView.vue
+++ b/ui/src/views/GroupMembersView.vue
@@ -27,7 +27,7 @@
       <v-card variant="tonal" class="mb-4">
         <v-card-text class="d-flex flex-wrap align-center ga-2">
           <v-autocomplete v-model="newMember" v-model:search="searchTerm" :label="t('id.group.addPlaceholder')" :items="searchResults" item-title="label" item-value="id" :loading="searching" no-filter
-            clearable return-object="false" variant="outlined" density="compact" hide-details style="min-width: 320px; flex: 1 1 320px" @update:search="onSearch" @update:menu="onSearchMenu" />
+            clearable return-object="false" variant="outlined" density="compact" hide-details autocomplete="off" style="min-width: 320px; flex: 1 1 320px" @update:search="onSearch" @update:menu="onSearchMenu" />
           <v-btn color="primary" prepend-icon="mdi-account-plus" :disabled="!newMember || !groupName" :loading="adding" @click="addMember">
             {{ t('id.group.add') }}
           </v-btn>
diff --git a/ui/src/views/UserEditDialog.vue b/ui/src/views/UserEditDialog.vue
index 9da9a43..003c0c9 100644
--- a/ui/src/views/UserEditDialog.vue
+++ b/ui/src/views/UserEditDialog.vue
@@ -26,7 +26,7 @@
                    user types (300 ms debounced). v-model stores the company name
                    as a string, matching the payload contract of rest/service/id/user. -->
               <v-autocomplete v-model="form.company" :items="companyResults" :loading="companyLoading" :search="companySearchQuery" item-title="name" item-value="name" :label="t('user.company')"
-                placeholder="Rechercher une entité…" variant="outlined" class="mb-2" no-filter clearable @update:search="onCompanySearch">
+                placeholder="Rechercher une entité…" variant="outlined" class="mb-2" no-filter clearable autocomplete="off" @update:search="onCompanySearch">
                 <template #item="{ props: itemProps, item }">
                   <v-list-item v-bind="itemProps" :title="item?.name || ''">
                     <template v-if="item?.scope || item?.count !== undefined" #subtitle>
@@ -47,13 +47,13 @@
                    multiple + chips lets the user type any email (no
                    autocomplete source) and confirm with Enter or Tab;
                    existing emails are restored as chips at load time. -->
-              <v-combobox v-model="form.mails" :label="t('user.emails')" multiple chips closable-chips variant="outlined" class="mb-2" :hint="t('user.emailsHint')" persistent-hint />
+              <v-combobox v-model="form.mails" :label="t('user.emails')" multiple chips closable-chips variant="outlined" class="mb-2" :hint="t('user.emailsHint')" persistent-hint autocomplete="off" />
               <!-- Auto-suggest for groups (multi-select). Queries
                    rest/service/id/group as the user types (300 ms debounced).
                    v-model holds an array of group **names** (strings),
                    matching the payload contract of rest/service/id/user. -->
               <v-autocomplete v-model="groups" v-model:menu="groupMenu" :items="groupResults" :loading="groupLoading" :search="groupSearchQuery" item-title="name" item-value="name"
-                :label="t('user.groups')" placeholder="Ajouter un groupe…" variant="outlined" class="mb-2" multiple chips closable-chips no-filter clearable @update:search="onGroupSearch"
+                :label="t('user.groups')" placeholder="Ajouter un groupe…" variant="outlined" class="mb-2" multiple chips closable-chips no-filter clearable autocomplete="off" @update:search="onGroupSearch"
                 @update:model-value="onGroupModelUpdate">
                 <template #item="{ props: itemProps, item }">
                   <v-list-item v-bind="itemProps" :title="item?.name || ''" />

From ee32e6718f4210ac95c5cbecaa430b026b15811c Mon Sep 17 00:00:00 2001
From: Norman Niati <norman.niati@icloud.com>
Date: Thu, 28 May 2026 10:30:20 +0200
Subject: [PATCH 2/5] feat(ui): disable native browser autocomplete on delegate
 inputs

Adds autocomplete="off" to the Receiver and Resource v-autocomplete fields
in DelegateEditDialog so Chrome's autofill suggestions don't overlay the
Vuetify dropdown. Extends the same fix already applied to User, Company,
Group and GroupMembers screens.

Refs ligoj/plugin-id#36
---
 ui/src/views/DelegateEditDialog.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/ui/src/views/DelegateEditDialog.vue b/ui/src/views/DelegateEditDialog.vue
index 7f05d95..05d8dac 100644
--- a/ui/src/views/DelegateEditDialog.vue
+++ b/ui/src/views/DelegateEditDialog.vue
@@ -33,7 +33,7 @@
               </v-col>
               <v-col cols="12" sm="7">
                 <v-autocomplete v-model="form.receiver" v-model:search="receiverSearch" :label="t('delegate.receiver')" :items="receiverDisplayItems" item-title="label" item-value="id"
-                  :loading="receiverLoading" :rules="[rules.required]" no-filter clearable auto-select-first variant="outlined" class="mb-2" @update:search="onReceiverSearch"
+                  :loading="receiverLoading" :rules="[rules.required]" no-filter clearable auto-select-first variant="outlined" class="mb-2" autocomplete="off" @update:search="onReceiverSearch"
                   @update:menu="onReceiverMenu" />
               </v-col>
             </v-row>
@@ -62,7 +62,7 @@
                 <v-text-field v-if="form.type === 'TREE'" v-model="form.name" :label="t('delegate.resource')" :rules="[rules.required]" :hint="t('delegate.resourceDnHint')" persistent-hint
                   variant="outlined" class="mb-2" />
                 <v-autocomplete v-else v-model="form.name" v-model:search="resourceSearch" :label="t('delegate.resource')" :items="resourceDisplayItems" item-title="label" item-value="id"
-                  :loading="resourceLoading" :rules="[rules.required]" :hint="t('delegate.resourceHint')" persistent-hint no-filter clearable auto-select-first variant="outlined" class="mb-2"
+                  :loading="resourceLoading" :rules="[rules.required]" :hint="t('delegate.resourceHint')" persistent-hint no-filter clearable auto-select-first variant="outlined" class="mb-2" autocomplete="off"
                   @update:search="onResourceSearch" @update:menu="onResourceMenu" />
               </v-col>
             </v-row>

From 75fbebaf57461cb0451c3862e17fcd7baf0cf2be Mon Sep 17 00:00:00 2001
From: Norman Niati <norman.niati@icloud.com>
Date: Thu, 28 May 2026 10:32:36 +0200
Subject: [PATCH 3/5] feat(ui): tooltips on User/Company/Group/Members
 DataTable cell icons

Adds <v-tooltip> on status, action and remove icons inside DataTable cells
in UserListView, CompanyListView, GroupListView and GroupMembersView for
better discoverability.

Refs ligoj/plugin-id#38
---
 ui/src/i18n/en.js                 |  3 +++
 ui/src/i18n/fr.js                 |  3 +++
 ui/src/views/CompanyListView.vue  |  8 +++++++-
 ui/src/views/GroupListView.vue    |  8 +++++++-
 ui/src/views/GroupMembersView.vue |  1 +
 ui/src/views/UserListView.vue     | 13 +++++++++++--
 6 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/ui/src/i18n/en.js b/ui/src/i18n/en.js
index 4e770a7..90b7879 100644
--- a/ui/src/i18n/en.js
+++ b/ui/src/i18n/en.js
@@ -51,6 +51,7 @@ export default {
   // in bold red.
   'common.bulkDeleteConfirmBefore': 'Are you sure you want to delete ',
   'common.bulkDeleteConfirmAfter': ' items? This cannot be undone.',
+  'common.edit': 'Edit',
   // Chantier D2 — sensitive confirmations split in two fragments so the
   // login can be wrapped in bold red between them. The monolithic
   // `user.<action>Confirm` keys stay on the host side for any other
@@ -65,6 +66,8 @@ export default {
   'user.restoreConfirmAfter': '?',
   'user.resetPasswordConfirmBefore': 'Reset password for user ',
   'user.resetPasswordConfirmAfter': '? A new password will be sent.',
+  'user.statusLocked': 'Locked',
+  'user.statusActive': 'Active',
   'group.deleteConfirmBefore': 'Are you sure you want to delete ',
   'group.deleteConfirmAfter': '?',
   'company.deleteConfirmBefore': 'Are you sure you want to delete ',
diff --git a/ui/src/i18n/fr.js b/ui/src/i18n/fr.js
index 15fb71d..0dd900f 100644
--- a/ui/src/i18n/fr.js
+++ b/ui/src/i18n/fr.js
@@ -44,6 +44,7 @@ export default {
   // en gras-rouge pour la suppression en masse.
   'common.bulkDeleteConfirmBefore': 'Supprimer ',
   'common.bulkDeleteConfirmAfter': ' éléments ? Cette action est irréversible.',
+  'common.edit': 'Modifier',
   // Chantier D2 — confirmations sensibles découpées en deux fragments
   // pour insérer l'identifiant en gras-rouge entre eux. Les clés
   // monolithiques `user.<action>Confirm` restent côté host pour
@@ -58,6 +59,8 @@ export default {
   'user.restoreConfirmAfter': ' ?',
   'user.resetPasswordConfirmBefore': 'Réinitialiser le mot de passe de l\'utilisateur ',
   'user.resetPasswordConfirmAfter': ' ? Un nouveau mot de passe lui sera envoyé.',
+  'user.statusLocked': 'Verrouillé',
+  'user.statusActive': 'Actif',
   'group.deleteConfirmBefore': 'Êtes-vous certain de supprimer ',
   'group.deleteConfirmAfter': ' ?',
   'company.deleteConfirmBefore': 'Êtes-vous certain de supprimer ',
diff --git a/ui/src/views/CompanyListView.vue b/ui/src/views/CompanyListView.vue
index 419b155..de0eba2 100644
--- a/ui/src/views/CompanyListView.vue
+++ b/ui/src/views/CompanyListView.vue
@@ -34,14 +34,20 @@
       v-model:items-per-page="itemsPerPage" :headers="headers" :items="dt.items.value" :items-length="dt.totalItems.value" :loading="dt.loading.value" item-value="name" show-select hover
       @update:options="loadData" @click:row="(_, { item }) => router.push('/id/company/' + item.name)">
       <template #item.locked="{ item }">
-        <v-icon v-if="item.locked" color="error" size="small">mdi-lock</v-icon>
+        <v-tooltip v-if="item.locked" :text="t('user.statusLocked')" location="top">
+          <template #activator="{ props: tt }">
+            <v-icon v-bind="tt" color="error" size="small">mdi-lock</v-icon>
+          </template>
+        </v-tooltip>
       </template>
       <template #item.actions="{ item }">
         <v-btn icon size="small" variant="text" @click.stop="router.push('/id/company/' + item.name)">
           <v-icon size="small">mdi-pencil</v-icon>
+          <v-tooltip activator="parent" :text="t('common.edit')" location="top" />
         </v-btn>
         <v-btn icon size="small" variant="text" color="error" @click.stop="startDelete(item)">
           <v-icon size="small">mdi-delete</v-icon>
+          <v-tooltip activator="parent" :text="t('common.delete')" location="top" />
         </v-btn>
       </template>
     </LigojDataTableServer>
diff --git a/ui/src/views/GroupListView.vue b/ui/src/views/GroupListView.vue
index 01a692b..6f117a5 100644
--- a/ui/src/views/GroupListView.vue
+++ b/ui/src/views/GroupListView.vue
@@ -34,14 +34,20 @@
       v-model:items-per-page="itemsPerPage" :headers="headers" :items="dt.items.value" :items-length="dt.totalItems.value" :loading="dt.loading.value" item-value="name" show-select hover
       @update:options="loadData" @click:row="(_, { item }) => router.push('/id/group/' + item.name)">
       <template #item.locked="{ item }">
-        <v-icon v-if="item.locked" color="error" size="small">mdi-lock</v-icon>
+        <v-tooltip v-if="item.locked" :text="t('user.statusLocked')" location="top">
+          <template #activator="{ props: tt }">
+            <v-icon v-bind="tt" color="error" size="small">mdi-lock</v-icon>
+          </template>
+        </v-tooltip>
       </template>
       <template #item.actions="{ item }">
         <v-btn icon size="small" variant="text" @click.stop="router.push('/id/group/' + item.name)">
           <v-icon size="small">mdi-pencil</v-icon>
+          <v-tooltip activator="parent" :text="t('common.edit')" location="top" />
         </v-btn>
         <v-btn icon size="small" variant="text" color="error" @click.stop="startDelete(item)">
           <v-icon size="small">mdi-delete</v-icon>
+          <v-tooltip activator="parent" :text="t('common.delete')" location="top" />
         </v-btn>
       </template>
     </LigojDataTableServer>
diff --git a/ui/src/views/GroupMembersView.vue b/ui/src/views/GroupMembersView.vue
index 2ffea90..3786d25 100644
--- a/ui/src/views/GroupMembersView.vue
+++ b/ui/src/views/GroupMembersView.vue
@@ -61,6 +61,7 @@
         <template #item.actions="{ item }">
           <v-btn v-if="canRemove(item)" icon size="small" variant="text" color="error" :title="t('id.group.removeTitle')" @click.stop="startRemove(item)">
             <v-icon size="small">mdi-account-minus</v-icon>
+            <v-tooltip activator="parent" :text="t('id.group.removeTitle')" location="top" />
           </v-btn>
           <v-tooltip v-else-if="isTransitive(item)" :text="t('id.group.transitive')" location="top">
             <template #activator="{ props: tt }">
diff --git a/ui/src/views/UserListView.vue b/ui/src/views/UserListView.vue
index 33ada13..209b705 100644
--- a/ui/src/views/UserListView.vue
+++ b/ui/src/views/UserListView.vue
@@ -56,8 +56,16 @@
         </div>
       </template>
       <template #item.locked="{ item }">
-        <v-icon v-if="item.locked" color="error" size="small">mdi-lock</v-icon>
-        <v-icon v-else color="success" size="small">mdi-lock-open-variant</v-icon>
+        <v-tooltip v-if="item.locked" :text="t('user.statusLocked')" location="top">
+          <template #activator="{ props: tt }">
+            <v-icon v-bind="tt" color="error" size="small">mdi-lock</v-icon>
+          </template>
+        </v-tooltip>
+        <v-tooltip v-else :text="t('user.statusActive')" location="top">
+          <template #activator="{ props: tt }">
+            <v-icon v-bind="tt" color="success" size="small">mdi-lock-open-variant</v-icon>
+          </template>
+        </v-tooltip>
       </template>
       <template #item.actions="{ item }">
         <!-- Single gear button opening a menu of row actions (Fabrice
@@ -75,6 +83,7 @@
           <template #activator="{ props }">
             <v-btn icon size="x-small" variant="text" :aria-label="t('user.actions')" v-bind="props" @click.stop>
               <v-icon size="small">mdi-cog</v-icon>
+              <v-tooltip activator="parent" :text="t('user.actions')" location="top" />
             </v-btn>
           </template>
           <v-list density="compact" min-width="220">

From ec819a6fb56597d3278ef580309547099b2ad706 Mon Sep 17 00:00:00 2001
From: Norman Niati <norman.niati@icloud.com>
Date: Thu, 28 May 2026 10:34:13 +0200
Subject: [PATCH 4/5] feat(ui): tooltips on delegate list cell icons

Adds <v-tooltip> on type, admin/write granted and edit icons inside
DelegateListView cells. Reuses delegate.type.* keys for the type icons,
adds delegate.adminGranted and delegate.writeGranted i18n entries for
the granted check icons.

Header tooltips for Admin and Write columns are intentionally left as-is
since they are already wired via the tooltip header property (supported
natively by LigojDataTableServer).

Refs ligoj/plugin-id#38
---
 ui/src/i18n/en.js                 |  2 ++
 ui/src/i18n/fr.js                 |  2 ++
 ui/src/views/DelegateListView.vue | 25 +++++++++++++++++++++----
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/ui/src/i18n/en.js b/ui/src/i18n/en.js
index 90b7879..501c26e 100644
--- a/ui/src/i18n/en.js
+++ b/ui/src/i18n/en.js
@@ -38,6 +38,8 @@ export default {
   'delegate.write': 'Write',
   'delegate.adminHelp': 'With the administration security level on this resource, the receivers of this delegation can create other delegations to share this access with other valid receivers',
   'delegate.writeHelp': 'With the write security level, the receivers of this delegation can modify the members of the involved groups. Without this access, this delegation grants read-only rights',
+  'delegate.adminGranted': 'Administration granted',
+  'delegate.writeGranted': 'Write access granted',
   // Fragments wrapping the receiver name in bold red on the delete
   // confirmation (issue #37). The host keeps the monolithic
   // `delegate.deleteConfirm` key intact.
diff --git a/ui/src/i18n/fr.js b/ui/src/i18n/fr.js
index 0dd900f..3a0bffb 100644
--- a/ui/src/i18n/fr.js
+++ b/ui/src/i18n/fr.js
@@ -31,6 +31,8 @@ export default {
   'delegate.write': 'Écriture',
   'delegate.adminHelp': 'Avec le niveau de sécurité d\'administration sur cette ressource, les receveurs de cette délégation peuvent créer d\'autres délégations pour partager cet accès avec d\'autres receveurs valides',
   'delegate.writeHelp': 'Avec le niveau de sécurité d\'écriture, les receveurs de cette délégation peuvent modifier les membres des groupes impliqués. Sans cet accès cette délégation ne donne qu\'un droit de lecture',
+  'delegate.adminGranted': 'Administration accordée',
+  'delegate.writeGranted': 'Écriture accordée',
   // Fragments encadrant le nom du destinataire en gras-rouge dans la
   // confirmation de suppression (issue #37). Le host garde la clé
   // monolithique `delegate.deleteConfirm` intacte.
diff --git a/ui/src/views/DelegateListView.vue b/ui/src/views/DelegateListView.vue
index e61baa3..445794d 100644
--- a/ui/src/views/DelegateListView.vue
+++ b/ui/src/views/DelegateListView.vue
@@ -36,7 +36,11 @@
            for some rows, so normalize before the TYPE_ICONS lookup —
            same rationale as DelegateEditDialog.loadOnOpen(). -->
       <template #item.receiver="{ item }">
-        <v-icon size="small" class="me-1">{{ TYPE_ICONS[item.receiverType?.toUpperCase()] || 'mdi-account' }}</v-icon>
+        <v-tooltip :text="t('delegate.type.' + (item.receiverType || '').toLowerCase())" location="top">
+          <template #activator="{ props: tt }">
+            <v-icon v-bind="tt" size="small" class="me-1">{{ TYPE_ICONS[item.receiverType?.toUpperCase()] || 'mdi-account' }}</v-icon>
+          </template>
+        </v-tooltip>
         {{ item.receiver?.name || item.receiver?.id || item.name || '-' }}
       </template>
       <!-- Resource column (chantier D5+D8): fuses the former Type and
@@ -44,18 +48,31 @@
            Group / Domain / File-tree); the text is the resource name
            (or DN for TREE delegates). Same lowercase-normalize as above. -->
       <template #item.name="{ item }">
-        <v-icon size="small" class="me-1">{{ TYPE_ICONS[item.type?.toUpperCase()] || '' }}</v-icon>
+        <v-tooltip :text="t('delegate.type.' + (item.type || '').toLowerCase())" location="top">
+          <template #activator="{ props: tt }">
+            <v-icon v-bind="tt" size="small" class="me-1">{{ TYPE_ICONS[item.type?.toUpperCase()] || '' }}</v-icon>
+          </template>
+        </v-tooltip>
         {{ item.name || '-' }}
       </template>
       <template #item.canAdmin="{ item }">
-        <v-icon v-if="item.canAdmin" color="success" size="small">mdi-check</v-icon>
+        <v-tooltip v-if="item.canAdmin" :text="t('delegate.adminGranted')" location="top">
+          <template #activator="{ props: tt }">
+            <v-icon v-bind="tt" color="success" size="small">mdi-check</v-icon>
+          </template>
+        </v-tooltip>
       </template>
       <template #item.canWrite="{ item }">
-        <v-icon v-if="item.canWrite" color="success" size="small">mdi-check</v-icon>
+        <v-tooltip v-if="item.canWrite" :text="t('delegate.writeGranted')" location="top">
+          <template #activator="{ props: tt }">
+            <v-icon v-bind="tt" color="success" size="small">mdi-check</v-icon>
+          </template>
+        </v-tooltip>
       </template>
       <template #item.actions="{ item }">
         <v-btn icon size="small" variant="text" @click.stop="openDialog(item.id)">
           <v-icon size="small">mdi-pencil</v-icon>
+          <v-tooltip activator="parent" :text="t('common.edit')" location="top" />
         </v-btn>
         <v-btn icon size="small" variant="text" color="error" @click.stop="startDelete(item)">
           <v-icon size="small">mdi-delete</v-icon>

From 6080a78fae20cbb7175566b1d3c5abc84af0f7b8 Mon Sep 17 00:00:00 2001
From: Norman Niati <norman.niati@icloud.com>
Date: Thu, 28 May 2026 11:28:07 +0200
Subject: [PATCH 5/5] style(ui): center status, count and granted columns in
 DataTables
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Aligns the cell content of single-icon and small numeric columns to
center inside DataTable rows: Statut in UserListView, Membres and
Verrouillé in CompanyListView and GroupListView, Administration and
Écriture in DelegateListView.

Combines header.align='center' with a wrapper <div class="text-center">
inside the slot templates: Vuetify 4 header.align centers numeric cells
rendered by default but doesn't always cascade to slot content.
---
 ui/src/views/CompanyListView.vue  | 16 +++++++++-------
 ui/src/views/DelegateListView.vue | 28 ++++++++++++++++------------
 ui/src/views/GroupListView.vue    | 16 +++++++++-------
 ui/src/views/UserListView.vue     | 22 ++++++++++++----------
 4 files changed, 46 insertions(+), 36 deletions(-)

diff --git a/ui/src/views/CompanyListView.vue b/ui/src/views/CompanyListView.vue
index de0eba2..1b0dae7 100644
--- a/ui/src/views/CompanyListView.vue
+++ b/ui/src/views/CompanyListView.vue
@@ -34,11 +34,13 @@
       v-model:items-per-page="itemsPerPage" :headers="headers" :items="dt.items.value" :items-length="dt.totalItems.value" :loading="dt.loading.value" item-value="name" show-select hover
       @update:options="loadData" @click:row="(_, { item }) => router.push('/id/company/' + item.name)">
       <template #item.locked="{ item }">
-        <v-tooltip v-if="item.locked" :text="t('user.statusLocked')" location="top">
-          <template #activator="{ props: tt }">
-            <v-icon v-bind="tt" color="error" size="small">mdi-lock</v-icon>
-          </template>
-        </v-tooltip>
+        <div class="text-center">
+          <v-tooltip v-if="item.locked" :text="t('user.statusLocked')" location="top">
+            <template #activator="{ props: tt }">
+              <v-icon v-bind="tt" color="error" size="small">mdi-lock</v-icon>
+            </template>
+          </v-tooltip>
+        </div>
       </template>
       <template #item.actions="{ item }">
         <v-btn icon size="small" variant="text" @click.stop="router.push('/id/company/' + item.name)">
@@ -111,8 +113,8 @@ let lastOptions = {}
 const headers = computed(() => [
   { title: t('common.name'), key: 'name', sortable: true },
   { title: t('group.scope'), key: 'scope', sortable: false },
-  { title: t('group.members'), key: 'count', sortable: false, width: '100px' },
-  { title: t('group.locked'), key: 'locked', sortable: false, width: '80px' },
+  { title: t('group.members'), key: 'count', sortable: false, width: '100px', align: 'center' },
+  { title: t('group.locked'), key: 'locked', sortable: false, width: '80px', align: 'center' },
   { title: '', key: 'actions', sortable: false, width: '120px', align: 'center' },
 ])
 
diff --git a/ui/src/views/DelegateListView.vue b/ui/src/views/DelegateListView.vue
index 445794d..0e67fc6 100644
--- a/ui/src/views/DelegateListView.vue
+++ b/ui/src/views/DelegateListView.vue
@@ -56,18 +56,22 @@
         {{ item.name || '-' }}
       </template>
       <template #item.canAdmin="{ item }">
-        <v-tooltip v-if="item.canAdmin" :text="t('delegate.adminGranted')" location="top">
-          <template #activator="{ props: tt }">
-            <v-icon v-bind="tt" color="success" size="small">mdi-check</v-icon>
-          </template>
-        </v-tooltip>
+        <div class="text-center">
+          <v-tooltip v-if="item.canAdmin" :text="t('delegate.adminGranted')" location="top">
+            <template #activator="{ props: tt }">
+              <v-icon v-bind="tt" color="success" size="small">mdi-check</v-icon>
+            </template>
+          </v-tooltip>
+        </div>
       </template>
       <template #item.canWrite="{ item }">
-        <v-tooltip v-if="item.canWrite" :text="t('delegate.writeGranted')" location="top">
-          <template #activator="{ props: tt }">
-            <v-icon v-bind="tt" color="success" size="small">mdi-check</v-icon>
-          </template>
-        </v-tooltip>
+        <div class="text-center">
+          <v-tooltip v-if="item.canWrite" :text="t('delegate.writeGranted')" location="top">
+            <template #activator="{ props: tt }">
+              <v-icon v-bind="tt" color="success" size="small">mdi-check</v-icon>
+            </template>
+          </v-tooltip>
+        </div>
       </template>
       <template #item.actions="{ item }">
         <v-btn icon size="small" variant="text" @click.stop="openDialog(item.id)">
@@ -150,8 +154,8 @@ const editDelegateId = ref(null)
 const headers = computed(() => [
   { title: t('delegate.receiver'), key: 'receiver', sortable: true },
   { title: t('delegate.resource'), key: 'name', sortable: false },
-  { title: t('delegate.admin'), key: 'canAdmin', sortable: false, width: '80px', tooltip: t('delegate.adminHelp') },
-  { title: t('delegate.write'), key: 'canWrite', sortable: false, width: '80px', tooltip: t('delegate.writeHelp') },
+  { title: t('delegate.admin'), key: 'canAdmin', sortable: false, width: '80px', align: 'center', tooltip: t('delegate.adminHelp') },
+  { title: t('delegate.write'), key: 'canWrite', sortable: false, width: '80px', align: 'center', tooltip: t('delegate.writeHelp') },
   { title: '', key: 'actions', sortable: false, width: '120px', align: 'center' },
 ])
 
diff --git a/ui/src/views/GroupListView.vue b/ui/src/views/GroupListView.vue
index 6f117a5..73dfc51 100644
--- a/ui/src/views/GroupListView.vue
+++ b/ui/src/views/GroupListView.vue
@@ -34,11 +34,13 @@
       v-model:items-per-page="itemsPerPage" :headers="headers" :items="dt.items.value" :items-length="dt.totalItems.value" :loading="dt.loading.value" item-value="name" show-select hover
       @update:options="loadData" @click:row="(_, { item }) => router.push('/id/group/' + item.name)">
       <template #item.locked="{ item }">
-        <v-tooltip v-if="item.locked" :text="t('user.statusLocked')" location="top">
-          <template #activator="{ props: tt }">
-            <v-icon v-bind="tt" color="error" size="small">mdi-lock</v-icon>
-          </template>
-        </v-tooltip>
+        <div class="text-center">
+          <v-tooltip v-if="item.locked" :text="t('user.statusLocked')" location="top">
+            <template #activator="{ props: tt }">
+              <v-icon v-bind="tt" color="error" size="small">mdi-lock</v-icon>
+            </template>
+          </v-tooltip>
+        </div>
       </template>
       <template #item.actions="{ item }">
         <v-btn icon size="small" variant="text" @click.stop="router.push('/id/group/' + item.name)">
@@ -113,8 +115,8 @@ let lastOptions = {}
 const headers = computed(() => [
   { title: t('common.name'), key: 'name', sortable: true },
   { title: t('group.scope'), key: 'scope', sortable: false },
-  { title: t('group.members'), key: 'count', sortable: false, width: '100px' },
-  { title: t('group.locked'), key: 'locked', sortable: false, width: '80px' },
+  { title: t('group.members'), key: 'count', sortable: false, width: '100px', align: 'center' },
+  { title: t('group.locked'), key: 'locked', sortable: false, width: '80px', align: 'center' },
   { title: '', key: 'actions', sortable: false, width: '120px', align: 'center' },
 ])
 
diff --git a/ui/src/views/UserListView.vue b/ui/src/views/UserListView.vue
index 209b705..a63f427 100644
--- a/ui/src/views/UserListView.vue
+++ b/ui/src/views/UserListView.vue
@@ -56,16 +56,18 @@
         </div>
       </template>
       <template #item.locked="{ item }">
-        <v-tooltip v-if="item.locked" :text="t('user.statusLocked')" location="top">
-          <template #activator="{ props: tt }">
-            <v-icon v-bind="tt" color="error" size="small">mdi-lock</v-icon>
-          </template>
-        </v-tooltip>
-        <v-tooltip v-else :text="t('user.statusActive')" location="top">
-          <template #activator="{ props: tt }">
-            <v-icon v-bind="tt" color="success" size="small">mdi-lock-open-variant</v-icon>
-          </template>
-        </v-tooltip>
+        <div class="text-center">
+          <v-tooltip v-if="item.locked" :text="t('user.statusLocked')" location="top">
+            <template #activator="{ props: tt }">
+              <v-icon v-bind="tt" color="error" size="small">mdi-lock</v-icon>
+            </template>
+          </v-tooltip>
+          <v-tooltip v-else :text="t('user.statusActive')" location="top">
+            <template #activator="{ props: tt }">
+              <v-icon v-bind="tt" color="success" size="small">mdi-lock-open-variant</v-icon>
+            </template>
+          </v-tooltip>
+        </div>
       </template>
       <template #item.actions="{ item }">
         <!-- Single gear button opening a menu of row actions (Fabrice