Problem
The custom repo dropdown on the Signal Feed (RepoSelect in app/src/pages/Agents.tsx) is anchored via position: absolute + left: 0 relative to its trigger, but the trigger's position changes when the filter row wraps at narrower viewports. If the user opens the menu and then resizes the window — or if the menu's position was computed against a no-longer-current trigger location — the menu can land off-screen or visually drift away from its trigger.
The earlier fix (#38) addressed the static narrow-viewport case by switching from right: 0 to left: 0 + width: max-content + maxWidth: 280. That handles the initial render at any width, but not dynamic resize while the dropdown is open.
Repro
- Open
/agents at a wide viewport (~1440px)
- Click the repo dropdown so the menu is open
- Drag the window narrower (~900px or below) so the filter row wraps
- Menu now sits at the old trigger position, may be partially off-screen or detached from its trigger
Approach (sketch)
Three options, in increasing complexity:
- Close the dropdown on
window.resize — simplest, slightly annoying UX
- Force re-render on resize so the absolute-positioned menu re-anchors — listen for
resize, force a state bump while the menu is open
- Use a positioning library (e.g.
@floating-ui/react) to compute placement dynamically with collision detection — more weight, but the right shape if more menus get added
Recommend (2) for now; revisit (3) if menu count grows.
Files
app/src/pages/Agents.tsx — RepoSelect component (the click-outside / Escape handlers are already on a useEffect gated by open; add resize to the same listener block)
Acceptance
Out of scope
- Replacing the custom dropdown with a portal/floating-ui-based component (separate refactor)
Problem
The custom repo dropdown on the Signal Feed (
RepoSelectinapp/src/pages/Agents.tsx) is anchored viaposition: absolute+left: 0relative to its trigger, but the trigger's position changes when the filter row wraps at narrower viewports. If the user opens the menu and then resizes the window — or if the menu's position was computed against a no-longer-current trigger location — the menu can land off-screen or visually drift away from its trigger.The earlier fix (#38) addressed the static narrow-viewport case by switching from
right: 0toleft: 0+width: max-content+maxWidth: 280. That handles the initial render at any width, but not dynamic resize while the dropdown is open.Repro
/agentsat a wide viewport (~1440px)Approach (sketch)
Three options, in increasing complexity:
window.resize— simplest, slightly annoying UXresize, force a state bump while the menu is open@floating-ui/react) to compute placement dynamically with collision detection — more weight, but the right shape if more menus get addedRecommend (2) for now; revisit (3) if menu count grows.
Files
app/src/pages/Agents.tsx—RepoSelectcomponent (the click-outside / Escape handlers are already on auseEffectgated byopen; addresizeto the same listener block)Acceptance
Out of scope