From 28daf60b6662e166660723646aa375b0b4aec447 Mon Sep 17 00:00:00 2001
From: Tommaso Bailetti <tommaso.bailetti@nethesis.it>
Date: Fri, 2 Aug 2024 14:46:26 +0200
Subject: [PATCH] fix: layout issues in tables

---
 src/components/GroupsList.vue | 34 ++++++++++----------
 src/components/UserList.vue   | 58 ++++++++++++++++++-----------------
 2 files changed, 48 insertions(+), 44 deletions(-)

diff --git a/src/components/GroupsList.vue b/src/components/GroupsList.vue
index 0896506..2b53a6b 100644
--- a/src/components/GroupsList.vue
+++ b/src/components/GroupsList.vue
@@ -88,22 +88,24 @@ function handleGroupEdited() {
         <NeTableRow v-for="(group, index) in data" :key="index">
           <NeTableCell>{{ group.group }}</NeTableCell>
           <NeTableCell>{{ group.description }}</NeTableCell>
-          <NeTableCell class="flex items-center justify-end gap-x-4">
-            <NeButton kind="tertiary" size="sm" @click="groupToEdit = group">
-              <FontAwesomeIcon :icon="faEdit" class="pr-2" />
-              {{ $t('edit') }}
-            </NeButton>
-            <NeDropdown
-              :items="[
-                {
-                  id: 'delete',
-                  danger: true,
-                  label: $t('user_manager.group_delete'),
-                  action: () => (groupToDelete = group)
-                }
-              ]"
-              align-to-right
-            />
+          <NeTableCell>
+            <div class="flex items-center justify-end gap-2">
+              <NeButton kind="tertiary" size="sm" @click="groupToEdit = group">
+                <FontAwesomeIcon :icon="faEdit" class="pr-2" />
+                {{ $t('edit') }}
+              </NeButton>
+              <NeDropdown
+                :items="[
+                  {
+                    id: 'delete',
+                    danger: true,
+                    label: $t('user_manager.group_delete'),
+                    action: () => (groupToDelete = group)
+                  }
+                ]"
+                align-to-right
+              />
+            </div>
           </NeTableCell>
         </NeTableRow>
       </NeTableBody>
diff --git a/src/components/UserList.vue b/src/components/UserList.vue
index 73c984c..e4ba0c3 100644
--- a/src/components/UserList.vue
+++ b/src/components/UserList.vue
@@ -181,34 +181,36 @@ function toggleUserLock(user: User) {
               <p>{{ $t('user_manager.user_enabled') }}</p>
             </div>
           </NeTableCell>
-          <NeTableCell class="flex items-center justify-end gap-4">
-            <NeButton kind="tertiary" size="sm" @click="userToEdit = user">
-              <FontAwesomeIcon :icon="faEdit" class="pr-2" />
-              {{ $t('edit') }}
-            </NeButton>
-            <NeDropdown
-              :items="[
-                {
-                  id: 'lock',
-                  label: user.locked
-                    ? $t('user_manager.user_enable')
-                    : $t('user_manager.user_disable'),
-                  action: () => toggleUserLock(user)
-                },
-                {
-                  id: 'change-password',
-                  label: $t('user_manager.user_change_password'),
-                  action: () => (userToChangePassword = user)
-                },
-                {
-                  id: 'delete',
-                  danger: true,
-                  label: $t('user_manager.user_delete'),
-                  action: () => (userToDelete = user)
-                }
-              ]"
-              align-to-right
-            />
+          <NeTableCell>
+            <div class="flex justify-center gap-2">
+              <NeButton kind="tertiary" size="sm" @click="userToEdit = user">
+                <FontAwesomeIcon :icon="faEdit" class="pr-2" />
+                {{ $t('edit') }}
+              </NeButton>
+              <NeDropdown
+                :items="[
+                  {
+                    id: 'lock',
+                    label: user.locked
+                      ? $t('user_manager.user_enable')
+                      : $t('user_manager.user_disable'),
+                    action: () => toggleUserLock(user)
+                  },
+                  {
+                    id: 'change-password',
+                    label: $t('user_manager.user_change_password'),
+                    action: () => (userToChangePassword = user)
+                  },
+                  {
+                    id: 'delete',
+                    danger: true,
+                    label: $t('user_manager.user_delete'),
+                    action: () => (userToDelete = user)
+                  }
+                ]"
+                align-to-right
+              />
+            </div>
           </NeTableCell>
         </NeTableRow>
       </NeTableBody>