Give Card min-w-0 so the page stops scrolling sideways on a phone
The Overview page overflowed 80px at 393px wide. Traced to the "The book" card: the grid column was a correct 361px, the card inside it was 457px and refused to shrink. Confirmed by forcing `min-width: 0` on grid children in the live page, which took the overflow to 0. Fixed on the Card base class rather than at the call site, because this is the third time the same trap has been fixed individually — grid and flex children default to `min-width: auto` and cards routinely hold something unshrinkable, a tabular-nums figure or a nowrap badge. `min-width: 0` is inert for a block-level card outside a flex or grid parent, so applying it always costs nothing and removes the whole class of bug. Verified by running the stack locally against the demo data: 0px overflow across all 12 routes at both 393px and 1440px. AGENTS.md updated to say any NEW container primitive needs the same, with the one-line browser check to confirm it. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -135,9 +135,19 @@ conflict on, do an existence check instead.
|
||||
flag set to false was silently on. Use the `envBoolean` helper in
|
||||
`apps/api/src/lib/config.ts`.
|
||||
|
||||
**Grid children that truncate need `min-w-0`.** Grid items default to
|
||||
`min-width: auto` and `truncate` sets `nowrap`, so a long title becomes
|
||||
unshrinkable content and the page scrolls sideways on a phone.
|
||||
**Grid and flex children need `min-w-0`.** They default to
|
||||
`min-width: auto`, meaning they refuse to shrink below their content — and a
|
||||
`tabular-nums` figure, a `whitespace-nowrap` badge or a `truncate` title is all
|
||||
it takes. The page then scrolls sideways on a phone and nothing reports an
|
||||
error. This was fixed three separate times at individual call sites before
|
||||
`Card` was given `min-w-0` on its base class; **any new container primitive
|
||||
needs the same**. Check with:
|
||||
|
||||
```js
|
||||
document.documentElement.scrollWidth - document.documentElement.clientWidth
|
||||
```
|
||||
|
||||
It should be 0 on every route at 393px wide.
|
||||
|
||||
**Drizzle-generated migrations are not always valid SQL.** A `jsonb → integer`
|
||||
cast was emitted without the `USING` clause Postgres requires. Always apply a
|
||||
|
||||
Reference in New Issue
Block a user