feat: better page turner

src/app/tools/ratings/page.tsx

@@ -179,6 +179,10 @@ export default function Page() {
     }, [page]);
 
     return (
+      <Flex justify="center" wrap="wrap" gap="2">
+        <Button variant="soft" onClick={previousPage}>
+          <CaretLeftIcon />
+        </Button>
         <TextField.Root className={noArrows}>
           <TextField.Slot>Page</TextField.Slot>
           <TextField.Input
@@ -207,6 +211,24 @@ export default function Page() {
             out of {Math.ceil((players.data?.length ?? 0) / rowsPerPage)}
           </TextField.Slot>
         </TextField.Root>
+        <Select.Root
+          onValueChange={(value) => setRowsPerPage(parseInt(value))}
+          defaultValue={`${rowsPerPage}`}
+        >
+          <Select.Trigger />
+
+          <Select.Content>
+            {ROWS_OPTIONS.map((size) => (
+              <Select.Item value={`${size}`} key={size}>
+                {size} per page
+              </Select.Item>
+            ))}
+          </Select.Content>
+        </Select.Root>
+        <Button variant="soft" onClick={nextPage}>
+          <CaretRightIcon />
+        </Button>
+      </Flex>
     );
   }
 
@@ -260,30 +282,6 @@ export default function Page() {
         </Select.Root>
       </Flex>
 
-      <Flex justify="center" wrap="wrap" gap="2">
-        <Button variant="soft" onClick={previousPage}>
-          <CaretLeftIcon />
-        </Button>
-        <PageTurner />
-        <Select.Root
-          onValueChange={(value) => setRowsPerPage(parseInt(value))}
-          defaultValue={`${rowsPerPage}`}
-        >
-          <Select.Trigger />
-
-          <Select.Content>
-            {ROWS_OPTIONS.map((size) => (
-              <Select.Item value={`${size}`} key={size}>
-                {size} per page
-              </Select.Item>
-            ))}
-          </Select.Content>
-        </Select.Root>
-        <Button variant="soft" onClick={nextPage}>
-          <CaretRightIcon />
-        </Button>
-      </Flex>
-
       <Flex gap="2" justify="center">
         <Dialog.Root
           open={jumpToPositionOpen}
@@ -410,6 +408,8 @@ export default function Page() {
         </Dialog.Root>
       </Flex>
 
+      <PageTurner />
+
       <Leaderboard.Root>
         {players.isLoading ? (
           <Leaderboard.Gap message="Loading players..." />
@@ -430,15 +430,7 @@ export default function Page() {
         )}
       </Leaderboard.Root>
 
-      <Flex justify="center" gap="2">
-        <Button variant="soft" onClick={previousPage}>
-          <CaretLeftIcon />
-        </Button>
       <PageTurner />
-        <Button variant="soft" onClick={nextPage}>
-          <CaretRightIcon />
-        </Button>
-      </Flex>
     </PageWrapper>
   );
 }