fix: layout issues in tables

NethServer · Aug 2, 2024 · 28daf60 · 28daf60
1 parent 7a2a4c1
commit 28daf60
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 44 deletions.
diff --git 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
@@ -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>