From 4f2f953f34126cfe804a3dcec4d095e1b9a6c075 Mon Sep 17 00:00:00 2001
From: Shihaam Abdul Rahman <shihaam@shihaam.me>
Date: Sat, 1 Aug 2026 03:06:47 +0500
Subject: [PATCH] move page amount selection to other side

---
 frontend/src/components/Pagination.tsx | 34 ++++++++++++--------------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/Pagination.tsx b/frontend/src/components/Pagination.tsx
index 4abdeb8..9d941e2 100644
--- a/frontend/src/components/Pagination.tsx
+++ b/frontend/src/components/Pagination.tsx
@@ -66,25 +66,10 @@ export function TablePagination({
 
   return (
     <div className="flex flex-wrap items-center justify-between gap-2 border-t px-4 py-2 text-sm text-muted-foreground">
+      <span>
+        {from}–{to} of {total}
+      </span>
       <div className="flex items-center gap-2">
-        <span>Rows per page</span>
-        <Select value={String(pageSize)} onValueChange={(v) => onPageSizeChange(Number(v))}>
-          <SelectTrigger className="h-8 w-[4.5rem]">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            {PAGE_SIZE_OPTIONS.map((n) => (
-              <SelectItem key={n} value={String(n)}>
-                {n}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
-      <div className="flex items-center gap-2">
-        <span>
-          {from}–{to} of {total}
-        </span>
         <Button
           variant="outline"
           size="icon"
@@ -108,6 +93,19 @@ export function TablePagination({
         >
           <ChevronRight className="h-4 w-4" />
         </Button>
+        <span className="ml-2">Rows per page</span>
+        <Select value={String(pageSize)} onValueChange={(v) => onPageSizeChange(Number(v))}>
+          <SelectTrigger className="h-8 w-[4.5rem]">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {PAGE_SIZE_OPTIONS.map((n) => (
+              <SelectItem key={n} value={String(n)}>
+                {n}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
       </div>
     </div>
   )