Bring back group labels in users view with constrained table columns

dashboard/src/views/UsersView.vue

@@ -28,14 +28,19 @@ const usersColumns = {
   },
   user: {
     label: t('users.users.user'),
-    sort: true
+    nowrap: true,
+    sort: true,
   },
   groups: {
     label: t('users.users.groups'),
     sort: true,
     hideMobile: true,
+    nowrap: true,
+    width: '400px',
   },
-  actions: {}
+  actions: {
+    width: '55px',
+  }
 };
 
 const actionMenuModel = ref([]);
@@ -270,7 +275,7 @@ onMounted(async () => {
         <Button @click="onEditOrAddUser()">{{ $t('main.action.add') }}</Button>
       </template>
 
-      <TableView :columns="usersColumns" :model="filteredUsers" :busy="busy" :placeholder="$t(search ? 'users.users.noMatchesPlaceholder' : 'users.users.emptyPlaceholder')">
+      <TableView :columns="usersColumns" :model="filteredUsers" :busy="busy" :fixed-layout="true" :placeholder="$t(search ? 'users.users.noMatchesPlaceholder' : 'users.users.emptyPlaceholder')">
         <template #role="user">
           <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>
@@ -284,7 +289,9 @@ onMounted(async () => {
           <span class="text-muted" style="margin: 0 6px" v-else>{{ user.email }}</span>
           <i v-show="user.source" class="far fa-address-book" v-tooltip="$t('users.users.externalLdapTooltip')"></i>
         </template>
-        <template #groups="user">{{ user.groupIds.length }}</template>
+        <template #groups="user">
+          {{ user.groupIds.map(gid => groupsById[gid] ? groupsById[gid].name : gid).join(' ') }}
+        </template>
         <template #actions="user">
           <div class="table-actions">
             <!-- <Button tool plain secondary :disabled="!canEdit(user)" @click.capture="onEditOrAddUser(user)" :tooltip="$t('main.action.edit')" icon="fa-solid fa-pencil-alt" /> -->