# Mobile dense-card overlap repair pattern

Use when a public page or dashboard looks fine on desktop but mobile screenshots show cards, badges, filters, or diagram labels colliding. This is broader than topbar overflow; it applies to dense governance/knowledge-map/product surfaces.

## When it triggers

- User sends phone screenshots where text/cards overlap even though the route returns HTTP 200.
- The page uses multi-column grids, badges/chips, glassmorphism cards, decorative circles/pills, or `details/summary` accordions.
- Browser width may report no obvious JS error; the bug is CSS layout/ordering.

## Diagnosis steps

1. Reproduce at an actual phone viewport, e.g. `390x844`, not only browser default desktop.
2. Check numeric overflow:
   - `document.documentElement.scrollWidth`
   - `document.documentElement.clientWidth`
   - each visible element's bounding box vs viewport.
3. Take a real mobile screenshot/full-page screenshot. Numeric `scrollWidth <= clientWidth` is necessary but not sufficient: decorative badges can still visually collide without page-level overflow.
4. Inspect CSS order. A common cause is an early mobile `@media` rule being overridden later by the component's base desktop styles.

## Durable CSS fix shape

Put final overrides **after** the base component block:

```css
/* Late mobile overlap repair */
.route-shell,
.dense-card,
.search-panel { max-width: 100%; box-sizing: border-box; }
.route-shell *,
.dense-card * { box-sizing: border-box; min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .authority-steps,
  .search-panel,
  .accordion summary,
  .rules-list,
  .belief-map-steps,
  .definition-list { grid-template-columns: 1fr !important; }
  .card-header,
  .rule-card-top { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .badge-row,
  .chip-row { justify-content: flex-start; }
  .badge-row > *,
  .chip-row > * { max-width: 100%; white-space: normal; }
}
```

For first-visit/orientation modals on phones:

```css
@media (max-width: 620px) {
  .modal-backdrop { align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .modal-grid { grid-template-columns: 1fr !important; }
  .modal-card { width: min(100%, calc(100vw - 24px)); max-height: none; }
}
```

## Verification

- Build/deploy the frontend.
- Verify route health: `curl -I <url>` returns 200.
- Verify mobile viewport: `scrollWidth == clientWidth` and no off-screen bounding boxes for visible elements.
- Use a screenshot/vision pass to confirm no visual card/text collision.
- If a modal is open over content, distinguish normal overlay behavior from layout collision.

## Argorium Doctrine example

The Doctrine page had several dense surfaces: authority cards, search/filter panel, rule cards, civic-loop panel, 11-layer stack, and first-visit orientation modal. The robust fix was a late CSS override that forced phone layouts to one column, added `min-width:0`, `box-sizing:border-box`, `overflow-wrap:anywhere`, made badges/chips wrap, and compacted the modal into a single-column list. Verification used both headless mobile overflow probing and screenshot inspection.