prettify the go to page select

tegaki-tegaki · Nov 4, 2024 · baab654 · baab654
1 parent 9eb177e
commit baab654
Showing 1 changed file with 24 additions and 20 deletions.
diff --git a/src/components/ThumbnailGallery.tsx b/src/components/ThumbnailGallery.tsx
@@ -1,5 +1,7 @@
 import {
+  FormControl,
   Grid2,
+  InputLabel,
   MenuItem,
   Pagination,
   Paper,
@@ -57,26 +59,28 @@ export const ThumbnailGallery = ({
           })}
       </Grid2>
       <Stack sx={{ alignItems: "flex-end", marginX: 2, marginTop: 2 }}>
-        <Select
-          id="go-to-page"
-          label="Go to page"
-          variant="standard"
-          value={page.toString()}
-          onChange={(event) => {
-            console.log({ event });
-            setPage(parseInt(event.target.value.toString() ?? "1"));
-          }}
-        >
-          {[...Array(Math.floor(images.length / rowsPerPage)).keys()]
-            .map((i) => (i += 1))
-            .map((i) => {
-              return (
-                <MenuItem key={i} value={i}>
-                  {i}
-                </MenuItem>
-              );
-            })}
-        </Select>
+        <FormControl size="small" sx={{ minWidth: 120 }}>
+          <InputLabel id="go-to-page-label">Go to page</InputLabel>
+          <Select
+            id="go-to-page"
+            label="Go to page"
+            value={page.toString()}
+            onChange={(event) => {
+              console.log({ event });
+              setPage(parseInt(event.target.value.toString() ?? "1"));
+            }}
+          >
+            {[...Array(Math.floor(images.length / rowsPerPage)).keys()]
+              .map((i) => (i += 1))
+              .map((i) => {
+                return (
+                  <MenuItem key={i} value={i}>
+                    {i}
+                  </MenuItem>
+                );
+              })}
+          </Select>
+        </FormControl>
       </Stack>
       <TablePagination
         sx={{ marginX: 2 }}