From 457f36be066b54d4010a480209e8446bcef5cc91 Mon Sep 17 00:00:00 2001
From: amaliadwiy <iam.amaliadwi@gmail.com>
Date: Tue, 26 May 2026 14:43:59 +0800
Subject: [PATCH] fix: perbaiki layout filter Activity Logs agar tidak overflow

---
 src/frontend/routes/logs.tsx | 65 +++++++++++++++++++-----------------
 1 file changed, 35 insertions(+), 30 deletions(-)

diff --git a/src/frontend/routes/logs.tsx b/src/frontend/routes/logs.tsx
index 6508011..ad7f570 100644
--- a/src/frontend/routes/logs.tsx
+++ b/src/frontend/routes/logs.tsx
@@ -1,6 +1,7 @@
 import {
   ActionIcon,
   Badge,
+  Box,
   Container,
   Group,
   Loader,
@@ -100,39 +101,43 @@ function GlobalLogsPage() {
           </Group>
 
           <Paper withBorder radius="xl" p="md" className="glass">
-            <Group gap="sm" wrap="wrap" align="flex-end">
-              <Select
-                label="User"
-                placeholder="All users"
-                value={operatorId}
-                onChange={(v) => { setOperatorId(v ?? 'all'); setPage(1) }}
-                data={operatorOptions}
-                w={200}
-                clearable
-                size="sm"
-              />
-              <DatePickerInput
-                type="range"
-                label="Date range"
-                placeholder="Pick a date range"
-                value={dateRange}
-                onChange={(v) => { setDateRange(v); setPage(1) }}
-                locale="id"
-                valueFormat="DD MMM YYYY"
-                clearable
-                w={280}
-                size="sm"
-              />
+            <Stack gap="md">
+              <Group gap="sm" wrap="wrap" align="flex-end">
+                <Select
+                  label="User"
+                  placeholder="All users"
+                  value={operatorId}
+                  onChange={(v) => { setOperatorId(v ?? 'all'); setPage(1) }}
+                  data={operatorOptions}
+                  style={{ flex: 1, minWidth: 160 }}
+                  clearable
+                  size="sm"
+                />
+                <DatePickerInput
+                  type="range"
+                  label="Date range"
+                  placeholder="Pick a date range"
+                  value={dateRange}
+                  onChange={(v) => { setDateRange(v); setPage(1) }}
+                  locale="id"
+                  valueFormat="DD MMM YYYY"
+                  clearable
+                  style={{ flex: 2, minWidth: 220 }}
+                  size="sm"
+                />
+              </Group>
               <Stack gap={4}>
                 <Text size="xs" fw={500} c="dimmed">Action type</Text>
-                <SegmentedControl
-                  value={type}
-                  onChange={(v) => { setType(v); setPage(1) }}
-                  size="sm"
-                  data={LOG_TYPES.map((t) => ({ label: LOG_TYPE_LABEL[t] ?? t, value: t }))}
-                />
+                <Box style={{ overflowX: 'auto' }}>
+                  <SegmentedControl
+                    value={type}
+                    onChange={(v) => { setType(v); setPage(1) }}
+                    size="sm"
+                    data={LOG_TYPES.map((t) => ({ label: LOG_TYPE_LABEL[t] ?? t, value: t }))}
+                  />
+                </Box>
               </Stack>
-            </Group>
+            </Stack>
           </Paper>
 
           {isLoading && !data ? (