From d310bf3df8cf7c89989d211c78c8d244d18be8f8 Mon Sep 17 00:00:00 2001
From: QSchlegel <quirin.schlegel@icloud.com>
Date: Sat, 13 Jun 2026 12:57:55 +0200
Subject: [PATCH] fix(ux): themed, non-overflowing, mobile-friendly pagination
 control

The transactions pagination bar overflowed its card on the right and used
hardcoded dark colors + a raw <select>. Rewrite the body (props unchanged):
- container: themed `border bg-card`, `flex-wrap min-w-0 gap-3` so the groups
  reflow instead of spilling off the right edge.
- sort toggle: outline Button, icon-only on mobile (label hidden < sm).
- page size: shadcn Select (was a native unstyled <select>); same options +
  reset-to-page-1 behavior.
- nav: compact icon-only prev/next (h-9 w-9), muted tabular-nums page indicator;
  rely on Button's native disabled styling.

PaginationProps is unchanged, so both call sites (transactions + DRep list)
behave identically.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../common/overall-layout/pagination.tsx      | 93 ++++++++++++-------
 1 file changed, 57 insertions(+), 36 deletions(-)

diff --git a/src/components/common/overall-layout/pagination.tsx b/src/components/common/overall-layout/pagination.tsx
index 1473aa7e..1a542d94 100644
--- a/src/components/common/overall-layout/pagination.tsx
+++ b/src/components/common/overall-layout/pagination.tsx
@@ -1,5 +1,12 @@
 import React from "react";
 import { Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { ChevronLeft, ChevronRight, ArrowUp, ArrowDown } from "lucide-react";
 
 interface PaginationProps {
@@ -22,73 +29,87 @@ const Pagination: React.FC<PaginationProps> = ({
   setPageSize,
   order,
   setOrder,
+  // defaultPageSize is intentionally accepted (call-site compat) but unused.
   defaultPageSize = 25,
   maxPageSize = 100,
   stepSize = 25,
   onLastPage,
 }) => {
+  const pageSizeOptions = Array.from(
+    { length: maxPageSize / stepSize },
+    (_, i) => (i + 1) * stepSize,
+  ).filter((size) => size <= maxPageSize);
+
   return (
-    <div className="flex w-full items-center justify-between rounded-md border-x border-gray-400 p-4 shadow-md">
-      {/* Sorting Toggle */}
+    <div className="flex w-full min-w-0 flex-wrap items-center justify-between gap-3 rounded-md border bg-card px-3 py-2 text-sm">
+      {/* Sort order */}
       <Button
+        variant="outline"
+        size="sm"
         onClick={() => setOrder(order === "asc" ? "desc" : "asc")}
-        className="flex items-center gap-2 bg-gray-800 hover:bg-gray-700"
+        aria-label={order === "asc" ? "Sort ascending" : "Sort descending"}
+        className="gap-1.5"
       >
         {order === "asc" ? (
-          <ArrowUp className="h-5 w-5" />
+          <ArrowUp className="h-4 w-4" />
         ) : (
-          <ArrowDown className="h-5 w-5" />
+          <ArrowDown className="h-4 w-4" />
         )}
-        {order === "asc" ? "Ascending" : "Descending"}
+        <span className="hidden sm:inline">
+          {order === "asc" ? "Ascending" : "Descending"}
+        </span>
       </Button>
 
-      {/* Page Size Selector */}
-      <select
-        className="rounded border bg-gray-900 p-2 text-white"
-        value={pageSize}
-        onChange={(e) => {
-          setPageSize(Number(e.target.value));
+      {/* Page size */}
+      <Select
+        value={String(pageSize)}
+        onValueChange={(value) => {
+          setPageSize(Number(value));
           setCurrentPage(1); // Reset to first page when page size changes
         }}
       >
-        {Array.from(
-          { length: maxPageSize / stepSize },
-          (_, i) => (i + 1) * stepSize,
-        )
-          .filter((size) => size <= maxPageSize)
-          .map((size) => (
-            <option key={size} value={size}>
-              {size} per page
-            </option>
+        <SelectTrigger className="h-9 w-[110px] text-sm">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {pageSizeOptions.map((size) => (
+            <SelectItem key={size} value={String(size)}>
+              {size} / page
+            </SelectItem>
           ))}
-      </select>
+        </SelectContent>
+      </Select>
 
-      {/* Pagination Controls */}
-      <div className="flex items-center gap-4">
+      {/* Navigation */}
+      <div className="ml-auto flex items-center gap-1">
         <Button
-          onClick={() => setCurrentPage((prev: number) => Math.max(prev - 1, 1))} // ✅ Explicitly typed
+          variant="outline"
+          size="icon"
+          className="h-9 w-9"
           disabled={currentPage === 1}
-          className={`flex items-center gap-2 ${
-            currentPage === 1 ? "cursor-not-allowed opacity-50" : ""
-          }`}
+          aria-label="Previous page"
+          onClick={() => setCurrentPage((prev: number) => Math.max(prev - 1, 1))}
         >
-          <ChevronLeft className="h-5 w-5" /> Previous
+          <ChevronLeft className="h-4 w-4" />
         </Button>
 
-        <span className="text-white">Page {currentPage}</span>
+        <span className="px-1 tabular-nums text-muted-foreground">
+          Page {currentPage}
+        </span>
 
         <Button
-          onClick={() => setCurrentPage((prev: number) => prev + 1)} // ✅ Explicitly typed
+          variant="outline"
+          size="icon"
+          className="h-9 w-9"
           disabled={onLastPage}
-          className={`flex items-center gap-2 ${
-            onLastPage ? "cursor-not-allowed opacity-50" : ""
-          }`}
+          aria-label="Next page"
+          onClick={() => setCurrentPage((prev: number) => prev + 1)}
         >
-          Next <ChevronRight className="h-5 w-5" />
+          <ChevronRight className="h-4 w-4" />
         </Button>
       </div>
     </div>
   );
 };
 
-export default Pagination;
\ No newline at end of file
+export default Pagination;