From 5002fd1519db870a16e23e123d7292d8b19c046d Mon Sep 17 00:00:00 2001
From: amaliadwiy <iam.amaliadwi@gmail.com>
Date: Tue, 26 May 2026 14:37:28 +0800
Subject: [PATCH] fix: perbaiki layout table Recent Error Reports di dashboard

Kolom App, Version, Reported, dan Status tidak lagi wrap atau terpotong.
Tambah horizontal scroll pada container dan minWidth pada table.
---
 src/frontend/routes/dashboard.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/frontend/routes/dashboard.tsx b/src/frontend/routes/dashboard.tsx
index 0a8d8a5..b39c1de 100644
--- a/src/frontend/routes/dashboard.tsx
+++ b/src/frontend/routes/dashboard.tsx
@@ -198,15 +198,15 @@ function DashboardPage() {
             </Button>
           </Group>
 
-          <Paper withBorder radius="2xl" className="glass" p="md">
-            <Table className="data-table" verticalSpacing="sm">
+          <Paper withBorder radius="2xl" className="glass" p="md" style={{ overflowX: 'auto' }}>
+            <Table className="data-table" verticalSpacing="sm" style={{ minWidth: 560 }}>
               <Table.Thead>
                 <Table.Tr>
-                  <Table.Th>App</Table.Th>
+                  <Table.Th style={{ whiteSpace: 'nowrap' }}>App</Table.Th>
                   <Table.Th>Error Message</Table.Th>
-                  <Table.Th>Version</Table.Th>
-                  <Table.Th>Reported</Table.Th>
-                  <Table.Th>Status</Table.Th>
+                  <Table.Th style={{ whiteSpace: 'nowrap' }}>Version</Table.Th>
+                  <Table.Th style={{ whiteSpace: 'nowrap' }}>Reported</Table.Th>
+                  <Table.Th style={{ whiteSpace: 'nowrap' }}>Status</Table.Th>
                 </Table.Tr>
               </Table.Thead>
               <Table.Tbody>
@@ -227,7 +227,7 @@ function DashboardPage() {
                   </Table.Tr>
                 ) : recentErrors.map((error: any) => (
                   <Table.Tr key={error.id}>
-                    <Table.Td>
+                    <Table.Td style={{ whiteSpace: 'nowrap' }}>
                       <Text fw={600} size="sm" tt="uppercase">{error.app}</Text>
                     </Table.Td>
                     <Table.Td style={{ maxWidth: 280 }}>
@@ -237,13 +237,13 @@ function DashboardPage() {
                         </Text>
                       </Tooltip>
                     </Table.Td>
-                    <Table.Td>
+                    <Table.Td style={{ whiteSpace: 'nowrap' }}>
                       <Badge variant="light" color="gray" size="sm">v{error.version}</Badge>
                     </Table.Td>
-                    <Table.Td>
+                    <Table.Td style={{ whiteSpace: 'nowrap' }}>
                       <Text size="xs" c="dimmed">{formatTimeAgo(error.time)}</Text>
                     </Table.Td>
-                    <Table.Td>
+                    <Table.Td style={{ whiteSpace: 'nowrap' }}>
                       <Badge
                         color={SEVERITY_COLOR[error.severity] ?? 'gray'}
                         variant="light"