Skip to content

Conversation

@jaaydenh
Copy link
Contributor

@jaaydenh jaaydenh commented Feb 3, 2026

Summary

Unifies dropdown/menu surface styling across the app by introducing shared menu style primitives (surface/item/separator) and a single z-index token, then migrating bespoke dropdown implementations to use them.

Background

Issue: #2062

Implementation

  • Added --z-dropdown CSS token (1600) for dropdown/menu overlay stacking.
  • Added src/browser/components/ui/menuStyles.ts with shared classnames:
    • menuSurfaceClassName
    • menuItemBaseClassName
    • menuSeparatorClassName
  • Updated Radix wrappers to use the shared surface + z-index token:
    • ui/popover.tsx
    • ui/select.tsx
    • ui/context-menu.tsx
  • Migrated bespoke dropdowns/menus to use the shared surface styling:
    • AgentModePicker, ModelSelector, CommandSuggestions, KebabMenu, BaseSelectorPopover, SectionHeader

Validation

  • make static-check

Risks

  • Several menus previously used very high hardcoded z-index values (10000+) and now use --z-dropdown (1600). This is intentional for consistency, but could affect stacking relative to other overlays/toasts.

Generated with mux • Model: openai:gpt-5.2 • Thinking: xhigh • Cost: $6.64

@jaaydenh
Copy link
Contributor Author

jaaydenh commented Feb 3, 2026

@codex review

Please review the changes for #2062 (unified dropdown/menu surface styling via shared menuStyles + z-index token).

@chatgpt-codex-connector
Copy link

Codex Review: Didn't find any major issues. 🚀

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

@jaaydenh
Copy link
Contributor Author

jaaydenh commented Feb 3, 2026

Follow-up: ModelSelector dropdown had an accidental fixed height (h-50) + overflow-hidden, which could clip the search input/footer (incl. “Model settings”). Removed the fixed height to restore the previous layout.

@jaaydenh
Copy link
Contributor Author

jaaydenh commented Feb 3, 2026

ModelSelector follow-up: it was “auto-scrolling” on hover because we always call scrollIntoView when highlightedIndex changes, and hovering rows updates highlightedIndex. Added a small guard so hover-driven highlight changes don’t trigger scrollIntoView (keyboard navigation still does).

@jaaydenh
Copy link
Contributor Author

jaaydenh commented Feb 3, 2026

@codex review

@chatgpt-codex-connector
Copy link

Codex Review: Didn't find any major issues. Swish!

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

@jaaydenh jaaydenh self-assigned this Feb 3, 2026
Centralize shared Radix menu/dropdown surface styling and z-index.

- Add --z-dropdown CSS token
- Add menuStyles helpers and wire Popover/Select/ContextMenu to them

---

_Generated with `mux` • Model: `openai:gpt-5.2` • Thinking: `xhigh` • Cost: `$n/a`_

<!-- mux-attribution: model=openai:gpt-5.2 thinking=xhigh costs=n/a -->
Migrate bespoke dropdowns/menus to use shared menu surface styling (menuSurfaceClassName)
and the --z-dropdown token for consistent stacking.

Also composes menuItemBaseClassName for interactive rows where appropriate.

---

_Generated with `mux` • Model: `openai:gpt-5.2` • Thinking: `xhigh` • Cost: `$unknown`_

<!-- mux-attribution: model=openai:gpt-5.2 thinking=xhigh costs=unknown -->
@jaaydenh jaaydenh force-pushed the refactor/unify-dropdown-menu-styles-2062 branch from 6b2d8b4 to 13adced Compare February 4, 2026 15:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant