Skip to content

Commit

Permalink
fix: tables on mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
stonith404 committed Dec 9, 2022
1 parent c8a4521 commit b1bfb09
Show file tree
Hide file tree
Showing 2 changed files with 60 additions and 50 deletions.
106 changes: 58 additions & 48 deletions frontend/src/components/admin/AdminConfigTable.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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>
);
};

Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/admin/ManageUserTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit b1bfb09

Please sign in to comment.