Archived — A one-off decision tool — the call was made: in-content scrollbars #10–15 are now hidden in narrow mode in the shipped app. Kept for provenance; no longer maintained. See the Style Guide for current docs.
Narrow-mode scrollbars — pick which to drop
The six in-message / artifact surfaces from the audit (#10–15). Each is shown at a 360 px phone column with content that overflows, so the bar paints exactly as the live app draws it. Tick hide scrollbar on any card to preview the "taken out" state, then tell me the numbers.
How the bar behaves: the global rule (
::-webkit-scrollbar{width:10px}, copied verbatim) paints a
thin pill in --line. On desktop / desktop-narrow it's persistent (you'll see it here). On a
real phone it's a transient overlay that flashes during a scroll, then fades. "Take it out" = the same
suppression the composers already use: scrollbar-width:none + ::-webkit-scrollbar{display:none}
(content still scrolls — drag/swipe — just no visible bar).
#10code block in a message
↔ horizontal
360 px column
python
result = await orchestrate(panel=cast, situation=user_text, temperature=0.7, max_turns=12, stream=True) # long line forces a horizontal scrollbar
#11display (block) math
↔ horizontal
360 px column
t_evap = (5120 · π · G² · M³) / (ℏ · c⁴) ≈ 8.41 × 10⁻¹⁷ · (M / M_⊙)³ s ≈ 2.66 × 10⁶⁷ · (M / M_⊙)³ years
#12artifact body — wide table
↔ horizontal
360 px column
tableQuarterly funnel by channel
| Channel | Visitors | Signups | Activated | Paid | Churn | LTV |
|---|---|---|---|---|---|---|
| Organic search | 148,200 | 9,140 | 6,021 | 1,204 | 3.1% | $612 |
| Paid social | 92,470 | 5,880 | 3,402 | 733 | 4.7% | $418 |
| Referral | 21,330 | 2,910 | 2,180 | 690 | 2.2% | $905 |
#13code artifact
↔ horizontal
360 px column
codedebounce.ts
export const debounce = (fn, ms = 250) => { let h; return (...args) => { clearTimeout(h); h = setTimeout(() => fn.apply(this, args), ms); }; };
#14mermaid source fallback
↕ vertical · max-height 200
360 px column
graph TD
A[User opens room] --> B{Cached?}
B -- yes --> C[Paint from cache]
B -- no --> D[Fetch /api/boot]
D --> E[Render skeleton]
E --> F[Stream turns over SSE]
F --> G{Artifact in turn?}
G -- diagram --> H[Mount Mermaid in wildcard pane]
G -- code --> I[Syntax-highlight block]
G -- none --> J[Append speech bubble]
H --> K[panzoom: pinch + drag]
J --> L[Scroll to newest]
L --> M[Idle: prefetch recent rooms]
#15code inside a saved-note quote
↔ horizontal
360 px column
Andrej Karpathy · math and code
for epoch in range(epochs): logits = model(x); loss = F.cross_entropy(logits, y); loss.backward(); opt.step(); opt.zero_grad()