wibu/monitoring-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: perbaiki layout tabel User Management agar tidak overflow di layar sempit

Browse Source
This commit is contained in:
amaliadwiy
2026-05-26 15:00:47 +08:00
parent fe83fd6025
commit fe4ddf686e
1 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/frontend/routes/users.tsx
View File

@@ -309,14 +309,15 @@ function UsersPage() {
)} )}
</Group> </Group>
<Paper withBorder radius="2xl" className="glass" p={0} style={{ overflow: 'hidden' }}> <Paper withBorder radius="2xl" className="glass" p={0} style={{ overflowX: 'auto' }}>
<Table.ScrollContainer minWidth={480}>
<Table className="data-table" verticalSpacing="md" highlightOnHover> <Table className="data-table" verticalSpacing="md" highlightOnHover>
<Table.Thead> <Table.Thead>
<Table.Tr> <Table.Tr>
<Table.Th>Name & Contact</Table.Th> <Table.Th>Name & Contact</Table.Th>
<Table.Th>Role</Table.Th> <Table.Th style={{ whiteSpace: 'nowrap' }}>Role</Table.Th>
<Table.Th>Joined</Table.Th> <Table.Th style={{ whiteSpace: 'nowrap' }}>Joined</Table.Th>
<Table.Th>Actions</Table.Th> <Table.Th style={{ whiteSpace: 'nowrap' }}>Actions</Table.Th>
</Table.Tr> </Table.Tr>
</Table.Thead> </Table.Thead>
<Table.Tbody> <Table.Tbody>
@@ -341,8 +342,8 @@ function UsersPage() {
operators.map((user: any) => ( operators.map((user: any) => (
<Table.Tr key={user.id}> <Table.Tr key={user.id}>
<Table.Td style={{ opacity: user.active === false ? 0.45 : 1 }}> <Table.Td style={{ opacity: user.active === false ? 0.45 : 1 }}>
<Group gap="sm"> <Group gap="sm" wrap="nowrap">
<Box style={{ position: 'relative' }}> <Box style={{ position: 'relative', flexShrink: 0 }}>
<Avatar <Avatar
size="sm" size="sm"
radius="xl" radius="xl"
@@ -384,7 +385,7 @@ function UsersPage() {
{ROLE_LABEL[user.role] ?? user.role} {ROLE_LABEL[user.role] ?? user.role}
</Badge> </Badge>
</Table.Td> </Table.Td>
<Table.Td style={{ opacity: user.active === false ? 0.45 : 1 }}> <Table.Td style={{ opacity: user.active === false ? 0.45 : 1, whiteSpace: 'nowrap' }}>
<Text size="xs" fw={500} c={user.active === false ? 'dimmed' : undefined}> <Text size="xs" fw={500} c={user.active === false ? 'dimmed' : undefined}>
{new Date(user.createdAt).toLocaleDateString('en-GB', { {new Date(user.createdAt).toLocaleDateString('en-GB', {
day: 'numeric', day: 'numeric',
@@ -440,6 +441,7 @@ function UsersPage() {
)} )}
</Table.Tbody> </Table.Tbody>
</Table> </Table>
</Table.ScrollContainer>
</Paper> </Paper>
{response?.totalPages > 1 && ( {response?.totalPages > 1 && (