mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 18:05:11 +03:00
Danny White
c10d3debb1
## 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
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.