Files
supabase/packages/ui-patterns
Danny White a99c83fe03 fix(studio): give Search nav trigger a visible hover state (#48319)
## 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 -->
2026-07-29 06:23:57 +10:00
..
2026-07-02 17:03:08 +02:00

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.