[tmccoy14]

Need

Guardian's list pages run off the screen on phones once a list has a second page. The Policy Library is 58px wider than a 320px screen with two pages, and with ten pages even a 430px phone scrolls sideways. Every Guardian list paginates through this component.

Its info line also reads wrong past page 1: "Showing 51 to [25] of 146 agents" puts the page size where the range's end belongs.

Problem

Pagination lays out its info line and page buttons in one row that never wraps, and the info line can't break. The info line alone is about 230px, and each page adds a button of about 29px. The page-size dropdown sits inside the sentence, in the spot of the last item's number.

Change

• The range has both ends: the info reads "51–75 of 146 agents", then the page-size dropdown as its own control, labelled "per page": 51–75 of 146 agents [25 ▾] per page. Material UI, Ant Design and Gmail all keep the range as text and the page size as a separate control. The row is about as wide as before, as dropping "Showing … to" makes room for the label.
• One line on phones and narrow panes: below 42rem the row keeps the count without its noun, the dropdown, and previous, current page and next. First, last and the other page numbers hide. The full row needs up to about 640px with a four-digit count, so a lower switch leaves a band where it wraps.
• "per page" where it fits: in the narrow row the label shows from a 21rem row under 100 items and 23rem under 1,000 (each sized for the longest count and page number of its length), and never beside a four-digit count. In Guardian that's 370px and up for short lists, 400px and up for longer ones.
• Fallback: the row wraps, so when even the short line doesn't fit (a four-digit count at 320px) the page buttons drop below the count, still on the right.
• Its own container, a layout change: Pagination is a full-width @container, so it measures the space it actually has, in a pane as on a page. A parent that sizes to its content (w-fit, inline-flex, a right-aligned flex row) now needs to give it a width; the changelog lists this under Changed.
• Reading order: the count comes first in the markup as on screen, so a screen reader hears it before the dropdown (WCAG 1.3.2). It hears "51 to 75 of 146 agents"; the en dash is visual only.
• A page out of range, such as after a filter shrinks the list, shows as the nearest page; it had shown no current page and "95–95 of 95". The docs and prop comment say to clamp your own state too, or the list shows an empty page. The component doesn't call onPageChange itself.
• Robust hiding: .wide-only is doubled to outrank Button's own display, as .items-per-page-trigger already is, so the result doesn't depend on CSS load order.
• Doc comments on every prop. Changelog (Changed and Fixed), docs (Info line, Narrow widths and Width under Configuration, the currentPage row) and 5.4.2.

Screenshots

Guardian's Policy Library in dark mode, 95 policies on page 5, before | after.

320px

390px

1440px

Evidence

• In Guardian against its mock API, with this build swapped in, swept from 320 to 1440px in 10px steps: 95 items, 99 and 146 items on the last page, and 146 items at 25 per page stay on one line at every width. 999 and 1,450 items on the last page wrap only at 320–340px, where even the count without "per page" doesn't fit. Nothing scrolls sideways. On main the same page overflows by up to 232px.
• The 42rem switch, re-checked with the new wording in 2px steps from 520 to 1000px: the full row starts exactly at a 672px row in every case, with 24px to spare beside a four-digit count on its last page, and nothing wraps.
• Tests: the narrow buttons, the range and dropdown in markup order with no "Showing", the spoken count with its noun, the "per page" tiers, the info and dropdown hidden by showInfo={false}, a page above and below the range, and the compiled CSS (the container, the wrap and its right-aligned buttons, the 42rem rules, the label tiers and their order, and the doubled class).
• UI tests (229), lint, Prettier, the type check and the build pass.

Not covered

• The narrow count drops the type noun ("of 146"); screen readers still hear it. It wouldn't fit beside "per page", and two paginations on one page are rare.
• The "per page" thresholds assume the default page sizes. Options such as 250 or 1000 widen the dropdown and can wrap the narrow row, which falls back gracefully.
• No narrow demo on the docs page; the docs site's content column is wider than 42rem.
• The Guardian bump follows the release, with a 320px overflow check on the Policy Library.

🤖 Generated with Claude Code