dima/supabase

0 Fork 0

mirror of https://github.com/supabase/supabase.git synced 2026-10-07 10:25:06 +03:00

Files

T

History

Saxon FletcherandCursor 04747937a2 fix(ui-patterns): align badges and input in the tiny multi-select trigger (#49986 )

## What's changed

**Before**
<img width="467" height="353" alt="image"
src="https://github.com/user-attachments/assets/4587d51a-8bbe-4da4-a3dd-dcaac6b17993"
/>

**After**
<img width="541" height="360" alt="image"
src="https://github.com/user-attachments/assets/de66b229-54b0-4443-9c49-6f2ff0dd93aa"
/>

Independent of the Explorer/assistant stack.

`MultiSelectorTrigger` with `size="tiny"` had badges and the inline
input overflowing the 26px control. The trigger now stretches its
children (`items-stretch`), badges are `h-full py-0 leading-none` with a
tighter `gap-0.5`, the input/label drop their extra padding and
line-height, and the chevron self-centers. Other sizes are unchanged
(`isTiny` guards every new class). Also drops a redundant `text-sm` from
`MultiSelectorInput`, which `MultiSelectorInputVariants` already sets
per size.

## How to test

1. Design system (`pnpm dev:design-system`) or anywhere Studio uses
`<MultiSelector size="tiny">` (e.g. Logs filters): with 1–3 values
selected the badges sit inside the 26px control with no clipping; the
placeholder and chevron are vertically centered.
2. `size="small"` / default still look the same as on `master`.
3. `pnpm --filter ui-patterns exec vitest --run src/multi-select`
passes.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **Style**
- Improved the compact multi-select control layout, including spacing,
alignment, selected-value badges, input sizing, and dropdown indicator
positioning.
- Adjusted placeholder spacing when the tiny control has no selected
values.

- **Tests**
- Updated coverage to verify compact spacing and sizing when the tiny
multi-select control displays a selected value.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Cursor <cursoragent@cursor.com>

2026-09-07 09:48:01 +10:00

scripts

chore: UI theme cleanup (#47519 )

2026-07-02 17:03:08 +02:00

src

fix(ui-patterns): align badges and input in the tiny multi-select trigger (#49986 )

2026-09-07 09:48:01 +10:00

package.json

feat(ui-patterns): add async selection feedback (#49843 )

2026-09-02 14:25:03 +10:00

README.md

feat: Move some components into ui-patterns (#20774 )

2024-02-12 12:44:00 +01:00

tailwind.config.css

chore: Migrate the main Tailwind JS config to CSS (#45686 )

2026-05-13 13:14:58 +02:00

tsconfig.json

chore: Bump Typescript to v6 (#44204 )

2026-03-26 15:27:35 +01:00

vitest.config.ts

add coverage option to ui-patterns (#35669 )

2025-05-29 19:09:26 +02:00

vitest.setup.ts

chore: upgrade vite to v8 and vitest to v4 (#44833 )

2026-04-16 00:13:48 +09:00

README.md

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.