fix: tables on mobile

Author: stonith404

frontend/src/components/admin/AdminConfigTable.tsx

@@ -1,4 +1,12 @@
-import { ActionIcon, Code, Group, Skeleton, Table, Text } from "@mantine/core";
+import {
+  ActionIcon,
+  Box,
+  Code,
+  Group,
+  Skeleton,
+  Table,
+  Text,
+} from "@mantine/core";
 import { useModals } from "@mantine/modals";
 import { useEffect, useState } from "react";
 import { TbEdit, TbLock } from "react-icons/tb";
@@ -43,53 +51,55 @@ const AdminConfigTable = () => {
   ));
 
   return (
-    <Table verticalSpacing="sm" horizontalSpacing="xl" withBorder>
-      <thead>
-        <tr>
-          <th>Key</th>
-          <th>Value</th>
-          <th></th>
-        </tr>
-      </thead>
-      <tbody>
-        {isLoading
-          ? skeletonRows
-          : configVariables.map((configVariable) => (
-              <tr key={configVariable.key}>
-                <td style={{ maxWidth: "200px" }}>
-                  <Code>{configVariable.key}</Code>{" "}
-                  {configVariable.secret && <TbLock />} <br />
-                  <Text size="xs" color="dimmed">
-                    {configVariable.description}
-                  </Text>
-                </td>
-                <td>
-                  {configVariable.obscured
-                    ? "•".repeat(configVariable.value.length)
-                    : configVariable.value}
-                </td>
-                <td>
-                  <Group position="right">
-                    <ActionIcon
-                      color="primary"
-                      variant="light"
-                      size={25}
-                      onClick={() =>
-                        showUpdateConfigVariableModal(
-                          modals,
-                          configVariable,
-                          getConfigVariables
-                        )
-                      }
-                    >
-                      <TbEdit />
-                    </ActionIcon>
-                  </Group>
-                </td>
-              </tr>
-            ))}
-      </tbody>
-    </Table>
+    <Box sx={{ display: "block", overflowX: "auto" }}>
+      <Table verticalSpacing="sm" horizontalSpacing="xl" withBorder>
+        <thead>
+          <tr>
+            <th>Key</th>
+            <th>Value</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          {isLoading
+            ? skeletonRows
+            : configVariables.map((configVariable) => (
+                <tr key={configVariable.key}>
+                  <td style={{ maxWidth: "200px" }}>
+                    <Code>{configVariable.key}</Code>{" "}
+                    {configVariable.secret && <TbLock />} <br />
+                    <Text size="xs" color="dimmed">
+                      {configVariable.description}
+                    </Text>
+                  </td>
+                  <td>
+                    {configVariable.obscured
+                      ? "•".repeat(configVariable.value.length)
+                      : configVariable.value}
+                  </td>
+                  <td>
+                    <Group position="right">
+                      <ActionIcon
+                        color="primary"
+                        variant="light"
+                        size={25}
+                        onClick={() =>
+                          showUpdateConfigVariableModal(
+                            modals,
+                            configVariable,
+                            getConfigVariables
+                          )
+                        }
+                      >
+                        <TbEdit />
+                      </ActionIcon>
+                    </Group>
+                  </td>
+                </tr>
+              ))}
+        </tbody>
+      </Table>
+    </Box>
   );
 };
 

frontend/src/components/admin/ManageUserTable.tsx

@@ -18,8 +18,8 @@ const ManageUserTable = ({
   const modals = useModals();
 
   return (
-    <Box sx={{ display: "block", overflowX: "auto", whiteSpace: "nowrap" }}>
-      <Table verticalSpacing="sm" highlightOnHover>
+    <Box sx={{ display: "block", overflowX: "auto" }}>
+      <Table verticalSpacing="sm">
         <thead>
           <tr>
             <th>Username</th>