move page amount selection to other side

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>
   )