supabase / supabase / 22337648296

74%

push

github

feat(design-system): responsive admonition (#42971)

## What kind of change does this PR introduce?

Component improvement

## What is the current behavior?


[Admonition](https://supabase.com/design-system/docs/fragments/admonition)
often passes `actions`, often Button(s). These either are stacked via
the `layout` prop `horizontal` or `vertical`. That binary choice often
means, given layout flex, awkward text wrapping.

## What is the new behavior?

Admonition now has a `"responsive"` value for the `layout` prop. When
`layout="responsive"`, the Alert root gets `@container` so the
Admonition is the container-query context. The Admonition stays
`vertical` when it’s narrow and switches to `horizontal` when its own
width reaches the `@md` container breakpoint, independent of page width.

## Additional context

See the _Disk Management_ section of Database Settings to see the single
in-situ example.

Video demo:


https://github.com/user-attachments/assets/318a4530-5ae4-43f3-99cf-b75967659ed3

822 of 931 branches covered (88.29%)

Branch coverage included in aggregate %.

3068 of 4346 relevant lines covered (70.59%)

113.12 hits per line