`
(`0040_ignored_tables_also_nonlocal_tables.up.sql`). Fixed with
`overflow-wrap: anywhere` on the `code` rule; `pre` is unaffected since
`white-space: pre` offers no wrap opportunities and `pre` already scrolls.
The guide has no CSS grids at all.
- `fzf` — the 760px media query set `.grid { grid-template-columns:1fr }`,
the exact bare-`1fr` bug from atuin. All bare `1fr` grid tracks in the
guide (`.grid`, `.grid.three`, `.step`, `.syntax`, `.sim-row`,
`.hero-flow`, at every breakpoint) were converted to `minmax(0,1fr)`.
Wide `` blocks inside cards now scroll internally.
Original findings kept below for reference.
Two guides scrolled sideways at 390px, which no page should:
- **`gastown-user-guide.html` — 29px**
- **`fzf-user-guide.html` — 10px**
The cause found in the atuin guide was a CSS grid whose items default to
`min-width: auto`, letting a wide `` push the column past the viewport
instead of scrolling inside itself. Fixed there in commit `bf6427d`:
```css
.step { display:grid; grid-template-columns:42px minmax(0,1fr); }
.step > * { min-width:0; }
```
Check the same pattern first in those two guides — any `grid-template-columns`
using a bare `1fr` rather than `minmax(0,1fr)`, and any flex child without
`min-width:0`.
To locate the offending element, the diagnostic that found it walks every
element and skips anything inside a horizontal scroll container (so a correctly
scrolling `` is not a false positive):
```js
const limit = document.documentElement.clientWidth;
const scrolls = el => /auto|scroll|hidden/.test(getComputedStyle(el).overflowX);
[...document.querySelectorAll('body *')].filter(el => {
let p = el.parentElement;
while (p && p !== document.body) { if (scrolls(p)) return false; p = p.parentElement; }
return el.getBoundingClientRect().right > limit + 2;
});
```
---
## Suggested order of work — all done 2026-08-09, in this order
1. **Gap 1 on the four guides with no mobile nav** — this is the only gap that
makes a document unusable rather than merely imperfect.
2. **Gap 5** — two guides, likely a one-line fix each, easy to verify.
3. **Gap 3** — mechanical, ten files, same edit.
4. **Gap 2** — nine files, but needs care around which `localStorage` key it
clears.
5. **Gap 4** — cosmetic consolidation; do it when touching the CSS anyway, and
update `create-guide-prompt.md` in the same pass so new guides inherit it.
Gaps 2 and 3 are identical edits repeated across many files. Worth doing as one
sweep with a single verified patch rather than per-guide.
---
## Re-runnable audit
Requires `playwright` (`npm install playwright` in a scratch directory).
Prints one JSON row per guide.
```js
// audit.mjs — node audit.mjs
import { chromium } from 'playwright';
import { readdirSync, readFileSync } from 'fs';
const DIR = process.env.GUIDES_DIR || `${process.env.HOME}/guides`;
const files = readdirSync(DIR).filter(f => f.endsWith('.html')).sort();
const b = await chromium.launch();
const rows = [];
for (const f of files) {
const src = readFileSync(`${DIR}/${f}`, 'utf8');
// --- mobile ---
const ctx = await b.newContext({ viewport: { width: 390, height: 844 }, colorScheme: 'light' });
const p = await ctx.newPage();
const errs = [];
p.on('pageerror', e => errs.push(e.message));
await p.goto(`file://${DIR}/${f}`, { waitUntil: 'load' });
const navLinks = await p.locator('.sidebar nav a:visible, nav a:visible').count();
const toggle = await p.locator('button:visible', { hasText: /contents|menu|☰/i }).count();
const overflow = await p.evaluate(() =>
document.documentElement.scrollWidth - document.documentElement.clientWidth);
await ctx.close();
// --- desktop, light AUTO mode (no .light/.dark class) ---
const ctx2 = await b.newContext({ viewport: { width: 1440, height: 900 }, colorScheme: 'light' });
const p2 = await ctx2.newPage();
await p2.goto(`file://${DIR}/${f}`, { waitUntil: 'load' });
const glyph = await p2.evaluate(() => {
const el = document.querySelector('.brand-mark') || document.querySelector('.step-num');
if (!el) return null;
const s = getComputedStyle(el);
const lum = c => { const [r,g,bl] = c.match(/\d+/g).map(Number)
.map(v => { v/=255; return v<=.03928 ? v/12.92 : ((v+.055)/1.055)**2.4; });
return .2126*r + .7152*g + .0722*bl; };
const L1 = lum(s.color), L2 = lum(s.backgroundColor);
return { color: s.color, bg: s.backgroundColor,
ratio: Math.round(((Math.max(L1,L2)+.05)/(Math.min(L1,L2)+.05))*10)/10 };
});
await ctx2.close();
rows.push({ file: f, navAt390: navLinks, toggle, overflow,
hasQuiz: /quiz-item/.test(src),
quizReset: /quiz-reset|resetQuiz/.test(src),
clipCatch: /\.catch\(/.test(src),
onAccentToken: /--on-accent/.test(src),
unguardedNotLight: (src.match(/:root:not\(\.light\)/g) || []).length
- (src.match(/@media \(prefers-color-scheme: dark\) \{ :root:not\(\.light\)/g) || []).length,
glyph, errs: errs.length });
}
await b.close();
console.log(JSON.stringify(rows, null, 1));
```
### What this audit does not cover
Deliberate limits, so the table is not mistaken for a full review:
- **Dark mode is only checked for glyph contrast**, not for body text, tables,
callouts, terminal panels or diagrams.
- **Print stylesheets are not checked at all.** Verify separately with
`page.emulateMedia({ media: 'print' })`; note that CSS alone cannot open a
closed `` in Chromium — it needs a `beforeprint` listener, which so
far only the atuin guide has.
- **Keyboard navigation and focus order are not tested.**
- **Only the 390px and 1440px widths are sampled**, so a defect that appears
only between breakpoints will be missed.
- **`navAt390` counts visible links, not usability.** A guide showing 20 links
scores well here while burying its content below a full-screen list.