From 6d383224a47424c74b9ffcf40fae8ba548255eb1 Mon Sep 17 00:00:00 2001
From: Matt Van Horn <mvanhorn@users.noreply.github.com>
Date: Sun, 17 May 2026 01:09:51 -0700
Subject: [PATCH] fix: keep usage details pagination inside mobile viewport
 (#1218)

On viewports below 640px the pagination row at Dashboard > Usage >
Details rendered the rows-per-page select plus the full numbered page
list plus the prev/next chevrons in one unwrapped flex row with no
horizontal padding. On a 390px phone the Rows: label was clipped on
the left and the next chevron was clipped on the right.

Add px-2 to the outer container so the pagination card has horizontal
breathing room. Switch the inner controls group to flex-wrap with
gap-2 on mobile (and gap-4 from sm: up) so the rows-per-page select
can wrap below the chevrons. Hide the numbered page buttons, the
1 / last anchors, and the ... ellipses below sm: -- only the prev,
current page indicator, and next chevrons render on mobile, which
keeps every control reachable while fitting inside the card.

Desktop layout (>= 640px) is unchanged.

Refs decolua/9router#1146
---
 src/shared/components/Pagination.js | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/shared/components/Pagination.js b/src/shared/components/Pagination.js
index 913f5eb..9efa9b5 100644
--- a/src/shared/components/Pagination.js
+++ b/src/shared/components/Pagination.js
@@ -37,7 +37,7 @@ export default function Pagination({
   return (
     <div
       className={cn(
-        "flex flex-col sm:flex-row items-center justify-between gap-4 py-4",
+        "flex flex-col sm:flex-row items-center justify-between gap-4 py-4 px-2",
         className
       )}
     >
@@ -50,7 +50,7 @@ export default function Pagination({
         </div>
       )}
 
-      <div className="flex items-center gap-4">
+      <div className="flex flex-wrap items-center justify-center gap-2 sm:gap-4">
         {/* Page size selector */}
         {onPageSizeChange && (
           <div className="flex items-center gap-2">
@@ -92,12 +92,12 @@ export default function Pagination({
                   variant="ghost"
                   size="sm"
                   onClick={() => onPageChange(1)}
-                  className="w-9 px-0"
+                  className="w-9 px-0 hidden sm:inline-flex"
                 >
                   1
                 </Button>
                 {pageNumbers[0] > 2 && (
-                  <span className="text-text-muted px-1">...</span>
+                  <span className="text-text-muted px-1 hidden sm:inline">...</span>
                 )}
               </>
             )}
@@ -108,7 +108,10 @@ export default function Pagination({
                 variant={currentPage === page ? "primary" : "ghost"}
                 size="sm"
                 onClick={() => onPageChange(page)}
-                className="w-9 px-0"
+                className={cn(
+                  "w-9 px-0",
+                  currentPage === page ? "inline-flex" : "hidden sm:inline-flex"
+                )}
               >
                 {page}
               </Button>
@@ -117,13 +120,13 @@ export default function Pagination({
             {pageNumbers[pageNumbers.length - 1] < totalPages && (
               <>
                 {pageNumbers[pageNumbers.length - 1] < totalPages - 1 && (
-                  <span className="text-text-muted px-1">...</span>
+                  <span className="text-text-muted px-1 hidden sm:inline">...</span>
                 )}
                 <Button
                   variant="ghost"
                   size="sm"
                   onClick={() => onPageChange(totalPages)}
-                  className="w-9 px-0"
+                  className="w-9 px-0 hidden sm:inline-flex"
                 >
                   {totalPages}
                 </Button>