From fe4ddf686eca3ddd0630cdbb281ba77940b1e495 Mon Sep 17 00:00:00 2001
From: amaliadwiy <iam.amaliadwi@gmail.com>
Date: Tue, 26 May 2026 15:00:47 +0800
Subject: [PATCH] fix: perbaiki layout tabel User Management agar tidak
 overflow di layar sempit

---
 src/frontend/routes/users.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/frontend/routes/users.tsx b/src/frontend/routes/users.tsx
index 2134067..9db039e 100644
--- a/src/frontend/routes/users.tsx
+++ b/src/frontend/routes/users.tsx
@@ -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 && (