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

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