michael/ProdDash
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases 1 Wiki Activity

Shell 1.10.1: header menus open where their button is, folded bar or not; ProdCom 1.3.3 keeps its filter on a narrow tile #39

Merged
michael merged 1 commits from claude/prodcom-filter-button-visibility-8a1d2d into main 2026-09-30 14:21:54 -04:00
Conversation 0 Commits 1 Files Changed 7
+134 -19
michael commented 2026-09-30 14:07:24 -04:00
Owner
Copy Link
Copy Source

The bug: the Channels menu opened and never showed

Under a folded-away title bar — always in fullscreen, or with auto-hide on — clicking ProdCom's Channels button (or the Timers menu) did nothing visible. The click worked: the menu was hidden: false. It just wasn't where anyone could see it.

The folded bar carries a backdrop-filter and a transform, and either one makes a position: fixed descendant position itself against the bar instead of the viewport. The shell parked each menu inside the bar, so its viewport-coordinate top was applied relative to the bar: the menu landed a screen-height below its button, inside the tile's overflow: hidden. Measured on a lower tile: button at y=362, menu at y=703, tile bottom at 622. Tiles near the top showed a misplaced menu; anything lower showed nothing — hence "sometimes" and "with a lot of tiles".

Stacked on that: even a correctly placed menu vanished as soon as the pointer travelled down into it, because leaving the top-edge zone folds the bar, and the menu was the bar's child.

Shell fix (public/shell.js addMenu, public/style.css)

  • Every header menu now lives on document.body, under a .tile-menu-host carrying the tile's data-module, so a module's scoped CSS still reaches its items (verified for ProdCom; Timers is the only other menu user and its CSS is descendant-scoped too). The module API is unchanged.
  • Placement keeps the whole menu inside the viewport (the old clamp only kept its top 80 px on screen).
  • An open menu holds a folded bar open (menu-open on the tile); the bar folds back when the last menu closes with the pointer elsewhere.
  • The open menu's button gets the gear's is-open accent, so the click is visibly acknowledged.
  • docs/MODULE-GUIDE.md note updated.

ProdCom 1.3.3: the filter survives a narrow tile

Seven controls need ~175 px of bar, and the shell clips what a narrow tile cannot fit — on a 3-column tile among many the Channels button was half-clipped or gone. Below 380 px the six secondary controls (timestamps, −, +, direction, latest, clear) fold into a single ⋯ menu offering the same actions, with checkmarks mirroring the toggles. Above it the bar is exactly as before; it switches live in both directions via a ResizeObserver on the tile body.

Verified

Browser against tools/prodcom-mock.js:

  • Auto-hide on, lower-left tile: peek → Channels → menu 6 px under the button, right-aligned, styled; pointer into the menu → bar stays; pick the "Tech" group → 2/4, entries filtered, menu stays open; click away → menu closes, bar folds.
  • Same with the fullscreen bar state (body.fullscreen + head-off; the app's browser pane can't grant real requestFullscreen, but it's the identical CSS path).
  • Normal bars: placement unchanged (right-aligned, 6 px under).
  • Narrow tiles (254 / 338 px): Channels + count + ⋯ shown; ⋯ items toggle timestamps and text size and persist to the layout; 507 px tile shows the full bar.

Rebased onto main after Shell 1.10.0 (#36) landed; the shell is 1.10.1 here. PR #34 still carries a 1.9.3 bump and will need a one-line package.json touch-up when it merges.

🤖 Generated with Claude Code

## The bug: the Channels menu opened and never showed Under a folded-away title bar — always in fullscreen, or with auto-hide on — clicking ProdCom's Channels button (or the Timers menu) did nothing visible. The click worked: the menu was `hidden: false`. It just wasn't where anyone could see it. The folded bar carries a `backdrop-filter` and a `transform`, and either one makes a `position: fixed` descendant position itself against **the bar** instead of the viewport. The shell parked each menu inside the bar, so its viewport-coordinate `top` was applied relative to the bar: the menu landed a screen-height below its button, inside the tile's `overflow: hidden`. Measured on a lower tile: button at y=362, menu at y=703, tile bottom at 622. Tiles near the top showed a misplaced menu; anything lower showed nothing — hence "sometimes" and "with a lot of tiles". Stacked on that: even a correctly placed menu vanished as soon as the pointer travelled down into it, because leaving the top-edge zone folds the bar, and the menu was the bar's child. ## Shell fix (`public/shell.js` `addMenu`, `public/style.css`) - Every header menu now lives on `document.body`, under a `.tile-menu-host` carrying the tile's `data-module`, so a module's scoped CSS still reaches its items (verified for ProdCom; Timers is the only other menu user and its CSS is descendant-scoped too). The module API is unchanged. - Placement keeps the whole menu inside the viewport (the old clamp only kept its top 80 px on screen). - An open menu holds a folded bar open (`menu-open` on the tile); the bar folds back when the last menu closes with the pointer elsewhere. - The open menu's button gets the gear's `is-open` accent, so the click is visibly acknowledged. - `docs/MODULE-GUIDE.md` note updated. ## ProdCom 1.3.3: the filter survives a narrow tile Seven controls need ~175 px of bar, and the shell clips what a narrow tile cannot fit — on a 3-column tile among many the Channels button was half-clipped or gone. Below 380 px the six secondary controls (timestamps, −, +, direction, latest, clear) fold into a single ⋯ menu offering the same actions, with checkmarks mirroring the toggles. Above it the bar is exactly as before; it switches live in both directions via a `ResizeObserver` on the tile body. ## Verified Browser against `tools/prodcom-mock.js`: - Auto-hide on, lower-left tile: peek → Channels → menu 6 px under the button, right-aligned, styled; pointer into the menu → bar stays; pick the "Tech" group → 2/4, entries filtered, menu stays open; click away → menu closes, bar folds. - Same with the fullscreen bar state (`body.fullscreen` + `head-off`; the app's browser pane can't grant real `requestFullscreen`, but it's the identical CSS path). - Normal bars: placement unchanged (right-aligned, 6 px under). - Narrow tiles (254 / 338 px): Channels + count + ⋯ shown; ⋯ items toggle timestamps and text size and persist to the layout; 507 px tile shows the full bar. Rebased onto main after Shell 1.10.0 (#36) landed; the shell is 1.10.1 here. PR #34 still carries a 1.9.3 bump and will need a one-line `package.json` touch-up when it merges. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
michael added 1 commit 2026-09-30 14:08:09 -04:00
Shell 1.10.1: header menus open where their button is, folded bar or not; ProdCom 1.3.3 keeps its filter on a narrow tile 41811ead1c 
A tile's dropdown menus (ProdCom's Channels, the Timers menu) opened but
never showed under a folded-away title bar — in fullscreen, or with
auto-hide on. The bar carries a backdrop-filter and a transform while
folded, and either one makes a fixed-positioned descendant position
itself against the bar instead of the viewport: the menu landed a
screen-height below its button, inside the tile's overflow. A tile near
the top of the screen showed a misplaced menu; anything lower showed
nothing at all.

The shell now hosts every header menu on the body, under an element
carrying the tile's data-module so a module's scoped CSS still reaches
its items; places it whole inside the viewport; holds a folded bar open
while one of its menus is open (the pointer has to travel down into the
menu); and marks the open menu's button the way the gear is marked.

ProdCom: seven controls need ~175 px of bar, and the shell clips what a
narrow tile cannot fit — the Channels button went with the rest. Below
380 px the six secondary controls fold into a ⋯ menu offering the same
actions, so the filter is the last thing to go.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
michael force-pushed claude/prodcom-filter-button-visibility-8a1d2d from e3967af110 to 41811ead1c 2026-09-30 14:08:09 -04:00 Compare
michael changed title from Shell 1.9.4: header menus open where their button is, folded bar or not; ProdCom 1.3.3 keeps its filter on a narrow tile to Shell 1.10.1: header menus open where their button is, folded bar or not; ProdCom 1.3.3 keeps its filter on a narrow tile 2026-09-30 14:08:27 -04:00
michael merged commit 7f6e5bd151 into main 2026-09-30 14:21:54 -04:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
chris christian michael (Michael McGary)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: michael/ProdDash#39