Skip to content

fix: repo dropdown can misalign after window resize #39

@michaelzwang13

Description

@michaelzwang13

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

  1. Open /agents at a wide viewport (~1440px)
  2. Click the repo dropdown so the menu is open
  3. Drag the window narrower (~900px or below) so the filter row wraps
  4. 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:

  1. Close the dropdown on window.resize — simplest, slightly annoying UX
  2. Force re-render on resize so the absolute-positioned menu re-anchors — listen for resize, force a state bump while the menu is open
  3. 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.tsxRepoSelect 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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions