fix(#552): compact text-only sidebar tab headers at narrow widths

[BorisTyshkevich]

What & why

Closes #552. At narrow sidebar widths both tab rows kept their icons, separator dots and item counts, so the elements competed for space and the panel looked broken. This makes them compact text-only labels below a threshold.

Mechanism — a container query, not a media query. The sidebar's width is a dragged pixel value written to sidebar.style.width (src/ui/app-shell.ts), which @media cannot see. .sidebar now declares container-type: inline-size; container-name: sidebar, following the existing .dash-tile-head precedent in src/styles.css.

Threshold — 220px (owner decision). The drag range is clamp(ev.clientX, 180, 420) (src/ui/splitters.ts), so 220px makes compact the bottom quarter: it engages only when the sidebar has been deliberately squeezed, and ordinary working widths (240–320px) are untouched.

One rule covers both tab rows because they already share a vocabulary — the upper role tabs are class: 'side-tabs upper-role-tabs' with .side-tab/.side-count children (src/ui/sidebar-upper.ts), the same grammar as the lower Library/History switcher. So Databases, Dashboards, Library and History are all handled by:

@container sidebar (max-width: 220px) {
  .side-tab svg { display: none; }
  .side-tab .side-count { display: none; }
}

The separator dot needs no separate rule: .side-count's text is '· ' + count, so the dot and the number are one text node and hiding the span removes both.

No markup change, no new class, no new font-size — so the compact state is pure CSS with no JS state to desynchronise, and widening the sidebar restores the full presentation on its own.

Verification

happy-dom cannot see CSS layout, so the real signal is a browser. tests/e2e/sidebar-tabs-narrow.spec.js (4 tests) reuses dashboard-tree.html's real mountAppShell fixture and drags the actual .col-resize handle (mousedown → mousemove → mouseup) rather than asserting against a hand-written width. It covers the wide default, the 220px compact state, the clamped 180px floor and the restored-wide state, measuring scrollWidth <= clientWidth, unclipped labels and no tab-rect overlap.

Observed live at 200px: both rows measure an even 50/50 split per tab, labels unclipped, History tab still clickable and receiving active; dragged back to 300px, icons and counts reappear.

Note

The issue body says "Dashboard" but the rendered upper tab reads "Dashboards" (plural). Left as-is — a pre-existing label, not something #552 asked to rename.

Checklist

• npm test passes (the per-file coverage gate is non-negotiable)
• Tests added/updated in the same change as the code
• npm run build succeeds (single-file dist/sql.html)
• Layers kept honest: pure logic in src/core/, network in src/net/ (injected fetch), DOM in src/ui/
• No new runtime dependency
• README / CHANGELOG.md ([Unreleased]) updated if behavior or the deployed surface changed
• Reconciled affected tracked work (roadmap Roadmap to 1.0.0 #68, the issue body, ADR/CHANGELOG) if this change reshaped it

🤖 Generated with Claude Code

https://claude.ai/code/session_01GiubaoqEuBzAyo5C4P8Vqr