Skip to content

fix: unify settings dropdowns to use custom Radix-based Select#248

Merged
binaricat merged 2 commits intomainfrom
fix/unify-settings-dropdowns
Mar 3, 2026
Merged

fix: unify settings dropdowns to use custom Radix-based Select#248
binaricat merged 2 commits intomainfrom
fix/unify-settings-dropdowns

Conversation

@binaricat
Copy link
Owner

Summary

Unify all settings dropdown selectors to use the app's custom Radix-based popover design instead of native OS <select> menus.

Problem

The settings page had two inconsistent dropdown styles:

  1. Custom styled — Radix-based popovers with app theme (used by FontSelect, TerminalFontSelect)
  2. Native OS — Browser <select> with system styling and right-aligned arrow (used by all other settings dropdowns)

Changes

components/settings/settings-ui.tsx

  • Replaced native <select> with @radix-ui/react-select in the shared Select component
  • Uses portal-based popover content matching FontSelect styling pattern
  • Adds check indicator for selected item, chevron icons, scroll buttons
  • Same props interface — no changes needed in any consuming components

Affected tabs (no code changes, automatically fixed):

  • Appearance — Language selector
  • Shortcuts — Hotkey scheme selector
  • Terminal — 7 dropdowns (cursor style, scrollback, encoding, etc.)
  • System — 1 dropdown

…lace native <select> in settings-ui.tsx with @radix-ui/react-select\nto match the app's custom dropdown design (FontSelect pattern).\n\nAll settings tabs now use consistent styled popover dropdowns with\ncheck indicators instead of OS-native select menus.
@binaricat binaricat merged commit 2d34e16 into main Mar 3, 2026
@binaricat binaricat deleted the fix/unify-settings-dropdowns branch March 3, 2026 11:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant