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>

AGENTS.md

@@ -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
+**Grid and flex children need `min-w-0`.** They default to
-`min-width: auto` and `truncate` sets `nowrap`, so a long title becomes
+`min-width: auto`, meaning they refuse to shrink below their content — and a
-unshrinkable content and the page scrolls sideways on a phone.
+`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

apps/web/src/components/ui/index.tsx

@@ -83,8 +83,22 @@ Input.displayName = 'Input';
 
 // --------------------------------------------------------------------- card
 
+/**
+ * `min-w-0` is on the base class deliberately, not left to each call site.
+ *
+ * A grid or flex child defaults to `min-width: auto`, meaning it refuses to
+ * shrink below its content — and cards routinely contain something
+ * unshrinkable (a `tabular-nums` figure, a `whitespace-nowrap` badge, a long
+ * unbroken title). The result is a card wider than its column, which drags the
+ * whole page into horizontal scrolling on a phone.
+ *
+ * This has now been fixed three separate times at individual call sites, which
+ * is the signal that it belongs here instead. `min-width: 0` is inert for a
+ * block-level card outside a flex or grid container, so applying it always
+ * costs nothing and removes the entire class of bug.
+ */
 export function Card({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn('card', className)} {...props} />;
+  return <div className={cn('card min-w-0', className)} {...props} />;
 }
 
 export function CardHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {