From dcaa484929413d5766d87f8128161607e743b0d8 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Mon, 2 Feb 2026 10:11:08 +0100
Subject: [PATCH] Show user roles always as separate column

---
 dashboard/src/views/UsersView.vue | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/dashboard/src/views/UsersView.vue b/dashboard/src/views/UsersView.vue
index 607d5beb5..9fd8504a6 100644
--- a/dashboard/src/views/UsersView.vue
+++ b/dashboard/src/views/UsersView.vue
@@ -35,14 +35,20 @@ const usersColumns = {
       if (!B.username) return 1;
       return A.username.localeCompare(B.username);
     },
+    width: '70%',
   },
   groups: {
     label: t('users.users.groups'),
     hideMobile: true,
     nowrap: true,
-    width: '400px',
+    width: '30%',
   },
-  actions: {}
+  role: {
+    width: '30px',
+  },
+  actions: {
+    width: '150px',
+  }
 };
 
 function createUserActionMenu(user) {
@@ -285,16 +291,17 @@ onMounted(async () => {
           <span class="text-muted" style="margin: 0 6px" v-else>{{ user.email }}</span>
 
           <i class="fa fa-ban" v-if="!user.active" v-tooltip="$t('users.users.inactiveTooltip')"></i>
-
-          <i class="fas fa-crown arrow" v-if="user.active && user.role === 'owner'" v-tooltip="$t('users.users.superadminTooltip')"></i>
-          <i class="fa fa-user-tie arrow" v-if="user.active && user.role === 'admin'" v-tooltip="$t('users.users.adminTooltip')"></i>
-          <i class="fas fa-users-cog arrow" v-if="user.active && user.role === 'usermanager'" v-tooltip="$t('users.users.usermanagerTooltip')"></i>
-          <i class="fas fa-mail-bulk arrow" v-if="user.active && user.role === 'mailmanager'" v-tooltip="$t('users.users.mailmanagerTooltip')"></i>
           <!-- <i v-show="user.source" class="far fa-address-book" v-tooltip="$t('users.users.externalLdapTooltip')"></i> -->
         </template>
         <template #groups="user">
           {{ user.groupIds.map(gid => groupsById[gid] ? groupsById[gid].name : gid).join(' ') }}
         </template>
+        <template #role="user">
+          <i class="fas fa-crown arrow" v-if="user.role === 'owner'" v-tooltip="$t('users.users.superadminTooltip')"></i>
+          <i class="fa fa-user-tie arrow" v-else-if="user.role === 'admin'" v-tooltip="$t('users.users.adminTooltip')"></i>
+          <i class="fas fa-users-cog arrow" v-else-if="user.role === 'usermanager'" v-tooltip="$t('users.users.usermanagerTooltip')"></i>
+          <i class="fas fa-mail-bulk arrow" v-else-if="user.role === 'mailmanager'" v-tooltip="$t('users.users.mailmanagerTooltip')"></i>
+        </template>
         <template #actions="user">
           <ActionBar :actions="createUserActionMenu(user)" />
           <!-- <div class="table-actions"> -->