Fix #278: popover viewport bounds #290

Merged
crueber merged 2 commits from fix/issue-278 into main 2026-09-10 15:09:14 +00:00
Owner

Fixes #278 — fixed-width popovers (clone menu, notification/error trays) overflowed a 390px phone viewport (clone-body measured hanging off at x = -10, tray off-screen).

Change (web/src/ui.css, the live stylesheet — web/css/repo.css untouched, dead):

  • Shared max-width: calc(100vw - 1rem) bound on every audited absolute/fixed panel: .clone-body, .ref-drop, .tasks-drop, .notif-drop, .reaction-drop, .label-drop, .milestone-drop, .close-drop, .tag-drop, .tray. Right-anchored panels shrink into view instead of clipping; desktop widths (w-96/w-80/w-64) untouched — the bound only caps. Theme-independent (dark + light).
  • Audit fix: .milestone-drop was missing the opaque-popover treatment (same shape as .label-drop) — added to the shared rule.
  • New regression test web/test/unit/popover-viewport.test.js (5 tests): bound lives in live css, covers all 10 panels, desktop widths kept, 390px fit arithmetic, milestone opacity.

Verification: new test 5/5 green; full node --test web/test/unit/*.test.js 484 pass / 8 fail — all 8 fail identically on clean origin/main (missing node_modules/marked in the fresh scratch worktree; all 73 pass in an env with deps installed). Narrow-viewport proof is structural (selector + fit arithmetic); no browser run — shared obscura daemon blocks loopback per task rules, noted as browser-open. Zero console errors (no runtime change); no new deps.

Fixes #278 — fixed-width popovers (clone menu, notification/error trays) overflowed a 390px phone viewport (clone-body measured hanging off at x = -10, tray off-screen). **Change** (`web/src/ui.css`, the live stylesheet — `web/css/repo.css` untouched, dead): - Shared `max-width: calc(100vw - 1rem)` bound on every audited absolute/fixed panel: `.clone-body, .ref-drop, .tasks-drop, .notif-drop, .reaction-drop, .label-drop, .milestone-drop, .close-drop, .tag-drop, .tray`. Right-anchored panels shrink into view instead of clipping; desktop widths (w-96/w-80/w-64) untouched — the bound only caps. Theme-independent (dark + light). - Audit fix: `.milestone-drop` was missing the opaque-popover treatment (same shape as `.label-drop`) — added to the shared rule. - New regression test `web/test/unit/popover-viewport.test.js` (5 tests): bound lives in live css, covers all 10 panels, desktop widths kept, 390px fit arithmetic, milestone opacity. **Verification:** new test 5/5 green; full `node --test web/test/unit/*.test.js` 484 pass / 8 fail — all 8 fail identically on clean origin/main (missing `node_modules`/`marked` in the fresh scratch worktree; all 73 pass in an env with deps installed). Narrow-viewport proof is structural (selector + fit arithmetic); no browser run — shared obscura daemon blocks loopback per task rules, noted as browser-open. Zero console errors (no runtime change); no new deps.
Right-anchored fixed-width panels (clone-body/tasks-drop w-96, fixed
error tray) overflowed a 390px phone viewport. Shared
max-width: calc(100vw - 1rem) bound on every audited absolute/fixed
panel; desktop widths untouched. Audit also found .milestone-drop
missing the opaque popover treatment — added alongside .label-drop.
Sign in to join this conversation.
No description provided.