From 4083641a6a9e4264be6f73dc7b7b81e185d3d490 Mon Sep 17 00:00:00 2001
From: nzambello <nzambello@protonmail.com>
Date: Sat, 18 Feb 2023 23:26:23 +0100
Subject: [PATCH] fix: pagination fieldset styles

---
 app/routes/time-entries.tsx | 65 ++++++++++++++++++++-----------------
 1 file changed, 35 insertions(+), 30 deletions(-)

diff --git a/app/routes/time-entries.tsx b/app/routes/time-entries.tsx
index 15b324e..f001bd1 100644
--- a/app/routes/time-entries.tsx
+++ b/app/routes/time-entries.tsx
@@ -132,45 +132,50 @@ export default function TimeEntriesPage() {
           variant="light"
           radius={theme.radius.md}
           leftIcon={<Play />}
+          sx={{ marginTop: theme.spacing.sm, marginBottom: theme.spacing.sm }}
         >
           Start
         </Button>
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'flex-end',
-            justifyContent: 'space-between',
-            margin: '0.5rem 0'
+        <NativeSelect
+          sx={{
+            marginLeft: 'auto',
+            marginRight: '0.5rem',
+            marginTop: theme.spacing.sm,
+            marginBottom: theme.spacing.sm
           }}
-        >
-          <NativeSelect
-            data={[
-              { label: '25 / page', value: '25' },
-              { label: '50 / page', value: '50' },
-              { label: '100 / page', value: '100' }
-            ]}
-            value={pageSize}
-            onChange={(event) => {
+          data={[
+            { label: '25 / page', value: '25' },
+            { label: '50 / page', value: '50' },
+            { label: '100 / page', value: '100' }
+          ]}
+          value={pageSize}
+          onChange={(event) => {
+            setSearchParams({
+              page: page.toString(),
+              size: event.currentTarget.value
+            });
+          }}
+        />
+        {data.total / pageSize > 1 && (
+          <Pagination
+            sx={{
+              marginLeft: '0.5rem',
+              marginTop: theme.spacing.sm,
+              marginBottom: theme.spacing.sm
+            }}
+            aria-label="Navigate through time entries pages"
+            siblings={1}
+            boundaries={1}
+            page={page}
+            total={Math.ceil(data.total / pageSize)}
+            onChange={(page) => {
               setSearchParams({
                 page: page.toString(),
-                size: event.currentTarget.value
+                size: pageSize.toString()
               });
             }}
           />
-          {data.total / pageSize > 1 && (
-            <Pagination
-              style={{ marginLeft: 10 }}
-              page={page}
-              total={Math.ceil(data.total / pageSize)}
-              onChange={(page) => {
-                setSearchParams({
-                  page: page.toString(),
-                  size: pageSize.toString()
-                });
-              }}
-            />
-          )}
-        </div>
+        )}
       </Paper>
       <Group
         mt="lg"