spb/ultra-sharp-agent-skills Public

1<!--2Author: Simon-Pierre Boucher3Contact: contact@spboucher.ai4-->56# Patterns — Responsive Layouts78## Contents9- Auto-responsive card grid (no breakpoints)10- Page shell (header/content/footer)11- Sidebar + content (collapses on narrow)12- Container-query card13- Media object14- Fluid space and size15- Overflow-proofing checklist16- Gotchas1718## Auto-responsive card grid (no breakpoints)1920```css21.cards {22  display: grid;23  /* min(16rem, 100%) prevents overflow when the container is narrower than 16rem */24  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));25  gap: 1rem;26}27```2829## Page shell (header/content/footer, footer pinned)3031```css32body {33  min-height: 100dvh;           /* dvh avoids mobile URL-bar jump; fallback: 100vh */34  display: grid;35  grid-template-rows: auto 1fr auto;36}37```3839## Sidebar + content (collapses on narrow)4041```css42/* Flexbox version — wraps naturally, no media query */43.with-sidebar {44  display: flex;45  flex-wrap: wrap;46  gap: 1.5rem;47}48.with-sidebar > .sidebar { flex: 1 1 15rem; }      /* basis = collapse point */49.with-sidebar > .content { flex: 999 1 60%; min-width: 0; }50```5152```css53/* Grid version — explicit breakpoint */54.shell { display: grid; gap: 1.5rem; }55@media (min-width: 48rem) {56  .shell { grid-template-columns: 15rem minmax(0, 1fr); }57}58```5960## Container-query card6162```css63.card-slot { container-type: inline-size; }6465.card { display: flex; flex-direction: column; gap: 0.75rem; }6667@container (min-width: 24rem) {68  .card { flex-direction: row; align-items: center; }69  .card img { max-width: 40%; }70}71```7273## Media object (avatar + text)7475```css76.media { display: flex; gap: 0.75rem; align-items: flex-start; }77.media > img { flex-shrink: 0; width: 3rem; height: 3rem; border-radius: 50%; }78.media > .body { min-width: 0; }   /* lets long words/URLs shrink instead of overflow */79```8081## Fluid space and size8283```css84:root {85  /* 1rem at 320px viewport → 2.5rem at 1280px, linear between */86  --space-section: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);87  --content-max: 72rem;88}89.section { padding-block: var(--space-section); }90.container {91  width: min(100% - 2rem, var(--content-max));92  margin-inline: auto;93}94```9596## Overflow-proofing checklist9798```css99img, video, canvas, svg { max-width: 100%; height: auto; }100.flex-child, .grid-child { min-width: 0; }          /* on anything that must shrink */101.prose { overflow-wrap: break-word; }               /* long URLs, tokens */102table { display: block; overflow-x: auto; }         /* wide data tables scroll alone */103```104105Test sequence: 360px → 768px → 1280px → one odd width (e.g. 913px). Look for:106horizontal scrollbar, clipped text, stretched images, wrap orphans.107108## Gotchas109110- **`minmax(16rem, 1fr)` overflows below 16rem** — always wrap the minimum in `min(16rem, 100%)`.111- **`auto-fit` vs `auto-fill`:** auto-fit collapses empty tracks (items stretch); auto-fill keeps them (items stay small). One word, opposite layouts.112- **Flex `min-width: auto` default** means text children refuse to shrink — the single most common "why is this overflowing" cause.113- **Percentage heights need a sized ancestor**; prefer grid rows (`1fr`) or `min-height` chains.114- **`gap` on flexbox** is fine everywhere modern; if supporting old Safari (<14.1), fall back to margins.115- **Nested containers:** `@container` resolves against the *nearest* ancestor with `container-type` — name containers (`container-name: card-slot`) when nesting.116- **`100dvh` vs `100vh`:** dvh tracks the dynamic mobile toolbar; vh can leave a gap or cause scroll. Provide `100vh` first as fallback on the previous line.117