mirror of
https://github.com/supabase/supabase.git
synced 2026-10-09 03:15:06 +03:00
Danny White
df35577adc
## What kind of change does this PR introduce? UI bug fix. ## What is the current behavior? Titleless Admonitions using the `description` prop place their compact body text slightly too high beside the icon. Admonition bodies also inherit a 2px bottom margin from `AlertDescription`, making the vertical spacing subtly uneven. ## What is the new behavior? Titleless `description` content receives a small optical offset, centring a one-line description beside the icon. Rich MDX children retain their natural top alignment because Docs prose uses a taller line height. Admonition bodies also remove the inherited 2px bottom margin, balancing the surrounding space without changing the shared `AlertDescription` primitive. | Before | After | | --- | --- | | <img width="1856" height="856" alt="CleanShot 2026-08-05 at 17 52 34@2x" src="https://github.com/user-attachments/assets/5f8fb726-692a-4a63-ab37-8fe87f37edd6" /> | <img width="1676" height="850" alt="CleanShot 2026-08-06 at 12 05 18@2x" src="https://github.com/user-attachments/assets/9d9126fe-50ef-422c-b387-7a45550e73dd" /> | |_Note the imbalanced space under the text_ | _Note how the text is balanced vertically to the icon_ | ## To test - [Design System: Admonition](https://design-system-git-dnywh-fix-titleless-admonitio-db462e-supabase.vercel.app/design-system/docs/fragments/admonition): the description-only reference example, at desktop and mobile widths. - [Studio: Project Settings > Dashboard](https://studio-staging-git-dnywh-fix-titleless-admoniti-908cb8-supabase.vercel.app/dashboard/project/_/settings/dashboard): the Dashboard preferences notice. The dashboardPreferences feature flag must be enabled. - [Docs: Local Development & CLI](https://docs-git-dnywh-fix-titleless-admonition-alignment-supabase.vercel.app/docs/guides/local-development): the titleless container-runtime callout near the top of the page. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Improved admonition spacing for descriptions and MDX content. * Removed unintended bottom spacing within admonition bodies. * Adjusted vertical spacing for untitled admonitions while preserving titled content layout. * **Tests** * Added coverage for paragraph spacing, wrapper structure, and title-specific styling. <!-- 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.