marketing-shibata50/9router
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: keep usage details pagination inside mobile viewport (#1218)

Browse source 
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
This commit is contained in:
Matt Van Horn 2026-05-17 01:09:51 -07:00 • committed by GitHub
parent 593c788c75
commit 6d383224a4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 10 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/shared/components/Pagination.js
View file

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