Fix/dropdown option placement on touch

[ozer0602]

Summary

Fixes dropdown options appearing in wrong screen position when using Chrome DevTools mobile/touch simulation. The root cause was appearance: none CSS on native <select> elements, which caused Chrome to switch to a JS-rendered dropdown that miscalculates position under touch simulation. Replaced all native selects with @radix-ui/react-select, which renders via a portal at document.body and calculates position independently of any CSS transforms or overflow context.

Changes

• Created components/ui/select.tsx — reusable AppSelect wrapper around Radix UI Select with empty-string sentinel ('' ↔ '__NONE__') to preserve existing state patterns
• Replaced all 20 native <select> elements across 10 pages/components with AppSelect
• Removed main select / .dark main select CSS block from globals.css (the appearance: none workaround that caused the bug)

Type

• Bug fix

Testing

• Tested manually (describe steps below)
• Added/updated unit tests
• No tests needed (explain why)

Open each affected page in Chrome DevTools with a mobile device simulated (touch enabled). Click every dropdown — options now appear directly below the trigger in all cases. Verified on desktop and dark mode as well.

Checklist

• My code follows the existing code style
• I have tested my changes locally
• I have updated documentation (if applicable)
• All existing tests pass (npm test)
• This PR has a descriptive title

Related Issues

[keysersoft]

me gusta