Symptom. On a phone, opening a book whose tags include a long subject heading makes the whole page scroll left/right. The tag sits on one unbreakable line and pushes past the edge of the screen.
Affects readers browsing without an editor account — guests (anonymous browsing) and viewer/download-only accounts. Accounts with the edit role get a different, removable-chip tag row that already wraps, which is why this went unnoticed.
Who hits it. Any library carrying Library-of-Congress subject headings, which is most metadata imported from public-domain sources. Real examples from a stock library:
France -- History -- Revolution, 1789-1799 -- FictionBritish -- France -- Paris -- FictionLondon (England) -- History -- 18th century -- Fiction
Measured. Book detail page as a guest at a 390px viewport: 12px of horizontal overflow. At 320px: 82px. With a single unbroken tag token the page ran 323px wide of the viewport.
Cause. The read-only tag pill is white-space: nowrap with no max-width, so its intrinsic width can exceed the wrapping flex row that holds it.
Found while triaging the mobile-overflow E2E gate.
Symptom. On a phone, opening a book whose tags include a long subject heading makes the whole page scroll left/right. The tag sits on one unbreakable line and pushes past the edge of the screen.
Affects readers browsing without an editor account — guests (anonymous browsing) and viewer/download-only accounts. Accounts with the edit role get a different, removable-chip tag row that already wraps, which is why this went unnoticed.
Who hits it. Any library carrying Library-of-Congress subject headings, which is most metadata imported from public-domain sources. Real examples from a stock library:
France -- History -- Revolution, 1789-1799 -- FictionBritish -- France -- Paris -- FictionLondon (England) -- History -- 18th century -- FictionMeasured. Book detail page as a guest at a 390px viewport: 12px of horizontal overflow. At 320px: 82px. With a single unbroken tag token the page ran 323px wide of the viewport.
Cause. The read-only tag pill is
white-space: nowrapwith nomax-width, so its intrinsic width can exceed the wrapping flex row that holds it.Found while triaging the mobile-overflow E2E gate.