mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 09:55:06 +03:00
## What kind of change does this PR introduce? Bug fix / UI polish. ## What is the current behavior? The Studio header "Search..." command menu entry point has no useful hover state in light mode. It used `hover:bg-surface-100`, which maps to elevated `--card` and brightens toward white, so the hover effectively disappears against the near-white header. It also lacked `cursor-pointer` and used a weaker border than nearby header controls like Connect. ## What is the new behavior? `CommandMenuTriggerInput` now matches the Connect button's default variant interaction: - `cursor-pointer` - `border-strong` with `hover:border-stronger` - `hover:bg-selection` (same fill as Connect; aliased to accent) Studio `LayoutHeader` drops the redundant `bg-transparent` override now that transparent is the shared default. | After | | --- | | <img width="2561" height="267" alt="CleanShot 2026-07-24 at 17 06 09@2x" src="https://github.com/user-attachments/assets/5a855512-9b7e-40b8-861f-647c87d472a7" /> | ## Additional context Docs top nav also consumes `CommandMenuTriggerInput`, so it picks up the same trigger styling. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary by CodeRabbit * **Style** * Updated the command menu trigger appearance with a transparent background and stronger border. * Improved hover styling for clearer visual feedback. * Standardized command menu trigger styling across platform and non-platform layouts. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
Supabase UI Patterns
This package should be used for components which are built using NPM libraries (react-markdown, reactflow for example),
which make no sense to be included in all apps. It should also be used for components which are constructed using various
components from the ui package.
This package does not have a barrel file - each component has to be imported from its index
(ui-patterns/PrivacySettings, for example). This is intentional so that adding a new component which is used only in
1 or 2 apps doesn't burden the rest of the apps.