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>
<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.Thead>
<Table.Tr>
<Table.Th>Name & Contact</Table.Th>
<Table.Th>Role</Table.Th>
<Table.Th>Joined</Table.Th>
<Table.Th>Actions</Table.Th>
<Table.Th style={{ whiteSpace: 'nowrap' }}>Role</Table.Th>
<Table.Th style={{ whiteSpace: 'nowrap' }}>Joined</Table.Th>
<Table.Th style={{ whiteSpace: 'nowrap' }}>Actions</Table.Th>
</Table.Tr>
</Table.Thead>
<Table.Tbody>
@@ -341,8 +342,8 @@ function UsersPage() {
operators.map((user: any) => (
<Table.Tr key={user.id}>
<Table.Td style={{ opacity: user.active === false ? 0.45 : 1 }}>
<Group gap="sm">
<Box style={{ position: 'relative' }}>
<Group gap="sm" wrap="nowrap">
<Box style={{ position: 'relative', flexShrink: 0 }}>
<Avatar
size="sm"
radius="xl"
@@ -384,7 +385,7 @@ function UsersPage() {
{ROLE_LABEL[user.role] ?? user.role}
</Badge>
</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}>
{new Date(user.createdAt).toLocaleDateString('en-GB', {
day: 'numeric',
@@ -440,6 +441,7 @@ function UsersPage() {
)}
</Table.Tbody>
</Table>
</Table.ScrollContainer>
</Paper>
{response?.totalPages > 1 && (