--- name: adom-shotlog-dev description: "DEV skill for building, debugging, and laying out adom-shotlog (the Rust CLI + server + embedded HTML viewer). Read before editing the viewer, the server, or the CLI. Covers the ralph-test-yourself loop, the hard fluid-layout rules (no outer-html scrollbars, ever; pretty scrollbars always), the build/deploy cycle, and the central-broker architecture. Trigger words: shotlog dev, build shotlog, shotlog layout, ralph test shotlog, viewer css, skinny webview layout, horizontal scrollbar, fluid layout, shotlog architecture, shotlog server." --- # adom-shotlog - DEV (build, layout, architecture) The app is one Rust binary: `src/main.rs` (CLI), `src/server.rs` (HTTP + WS + webview brokering), `src/store.rs` (channels + presence), `src/open.rs` (Hydrogen tabs), and `src/html/index.html` (the viewer, embedded via `include_str!`). ## ALWAYS ralph-test yourself after a layout change Never trust a viewer change by eye at desktop width. Load it at the **skinny ~20% webview width (≈360px)** - that's where the layout actually has to hold - screenshot it, measure it, fix, repeat. The skinny view is the one that matters. Headless ralph check (a real 360px VIEWPORT, so the CSS media queries fire - unlike CSS-narrowing an element, which does not): ```js // ralph-check.cjs - node ralph-check.cjs const puppeteer = require('/home/adom/project/node_modules/puppeteer-core'); (async()=>{ const b = await puppeteer.launch({executablePath: process.env.CHROME, headless:'new', args:['--no-sandbox','--disable-gpu','--disable-dev-shm-usage']}); const p = await b.newPage(); await p.setViewport({width:360, height:820, deviceScaleFactor:2}); await p.goto(process.argv[2], {waitUntil:'networkidle2', timeout:25000}).catch(()=>{}); await new Promise(r=>setTimeout(r,1800)); console.log(JSON.stringify(await p.evaluate(()=>{ const de=document.documentElement, vw=de.clientWidth; const off=[...document.querySelectorAll('*')].map(el=>{const r=el.getBoundingClientRect(); return {t:el.tagName+'.'+((''+el.className).split(' ')[0]||''), right:Math.round(r.right)};}) .filter(x=>x.right>vw+1).sort((a,b)=>b.right-a.right).slice(0,10); return {vw, htmlScrollW:de.scrollWidth, outerHScroll: de.scrollWidth>vw, off}; }))); await b.close(); })(); ``` `CHROME=$(ls -d ~/.cache/puppeteer/chrome/linux-*/chrome-linux64/chrome|head -1) node ralph-check.cjs ` **Pass = `outerHScroll:false` AND `off:[]`.** If anything is in `off`, that element is wider than the panel - make it fluid; don't paper over it with a scrollbar. ## HARD RULE: ONE designated scroller - the outer html NEVER shows a scrollbar The outermost html/body never scroll, either axis: `html, body { overflow: hidden }`. The `.feed` is the one designated scroller; overlays (modal) scroll themselves. Nested outer+inner scrollbars are an instant audit failure. Hard-won: `overflow-x: hidden` alone is NOT enough. At fractional devicePixelRatio (a pup window at DPR 1.5), `100dvh` computes fractionally, `scrollHeight` rounds 1px past `clientHeight`, and a phantom OUTER vertical scrollbar appears beside the feed's real one - even though a DPR-1 headless audit says everything fits. Root `overflow: hidden` makes the phantom impossible. Audit BOTH axes in the ralph check: `outerVScroll` and `outerHScroll` must both be false. A skinny webview must never show a horizontal scrollbar on the outermost html. If it does, the layout isn't fluid. Rules that keep it fluid: - `html, body { overflow: hidden; max-width: 100%; }` (the guarantee), plus `img { max-width: 100%; }`. - **No fixed-width children.** The classic offender was the child-window row: it used fixed `168px` cells + `overflow-x:auto`, which overflowed the ~360px panel and made an ugly scrollbar. Fix: `flex-wrap: wrap` with cells `flex: 1 1 130px; min-width: 0; max-width: 220px` so they share the row and wrap, never scroll. - **The header NEVER wraps** - it stays ONE 44px row at every width and SHEDS zones at narrow widths (see the header section below + adom-app-header spec). - Long values wrap: `word-break: break-word` / `pre-wrap`, never a fixed min-width that forces overflow. ## HARD RULE: scrollbars are ALWAYS pretty Every scrollable area gets styled - thin, rounded, themed, transparent track, teal on hover. Never ship a default OS scrollbar. ```css * { scrollbar-width: thin; scrollbar-color: rgba(139,148,158,.38) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(139,148,158,.32); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(0,184,176,.55); background-clip: padding-box; } ``` ## HARD RULE: read the human-ui-patterns skillpack BEFORE touching the viewer The viewer is a real UI, held to `~/.claude/skills/adom/ui-implementation-reference.md` (+ its SKILL.md). Read it before any UI change. Non-negotiables learned the hard way: - **NEVER use native `alert()` / `confirm()` / `prompt()`.** They are modal to the WHOLE browser and render "An embedded page at … says" - disgusting in a webview. For a destructive action use a **two-step arm** on the button itself (click -> "sure? clears all" for 3s -> click again), not a dialog. In-app only. - **Toasts must be clamped**: `max-width: min(360px, calc(100vw - 24px))` and WRAP. A `white-space:nowrap` toast + a long message spills off both screen edges. Bit us. - **Tooltips: body-appended `#global-tooltip`, cursor-relative, HARD-CLAMPED both axes** (skillpack §1c/§1d). The bug we shipped: the fallback clamped only the left/top min (`Math.max(4,x)`), so a 300px tooltip spilled off the right in the skinny ~360px panel. Fix = `Math.min(Math.max(M,x), vw-tw-M)` on BOTH axes + tooltip `max-width: min(300px, calc(100vw - 16px))`. Never a CSS `::after`. - **Number inputs ALWAYS show their unit** (%, shots, days) as an inline suffix inside the box (`.num-wrap` + `.unit`). A bare number box leaves the human guessing what they're changing. User called it. - **Buttons are styled pills, never raw `