mirror of
https://github.com/supabase/supabase.git
synced 2026-10-14 05:39:11 +03:00
Danny White
66a748cdd1
## What kind of change does this PR introduce? Bug fix. Follow-up to #49660. ## What is the current behavior? `AccordionTrigger` adds horizontal padding at the shared primitive level. This shifts content at call sites that already own their spacing. In the Studio Advanced settings sections, padding around the whole accordion also constrains the trigger and its hit area instead of letting it fill the row. ## What is the new behavior? The shared trigger no longer adds horizontal padding and its header explicitly fills its container. Both Studio Advanced settings sections now apply their padding inside the full-width trigger and content, keeping the text aligned while extending the focus outline and hit area across the row. The inset focus treatment from #49660 is unchanged. | Before | After | | --- | --- | | <img width="1334" height="286" alt="CleanShot 2026-09-08 at 16 18 57@2x" src="https://github.com/user-attachments/assets/3a057b45-1eb4-4928-ae69-2d636b0c4678" /> | <img width="1302" height="278" alt="CleanShot 2026-09-08 at 16 18 12@2x" src="https://github.com/user-attachments/assets/0454493e-4fbc-4ad2-a9fd-1b9dc1d486dc" /> | ## To test ### Studio replication destination 1. Open the [Studio staging preview](https://studio-staging-git-dnywh-fixaccordion-trigger-width-supabase.vercel.app) and select a project with Pipelines enabled. 2. Go to **Database > Replication**. Under **Destinations**, click **Add destination**. 3. Tab to **Advanced settings** and press Enter to expand it. 4. Confirm the text aligns with the form content, the focus outline spans the full row between the sheet edges, and clicking near the far right of the row toggles it. ### Studio access-token permissions 1. In the [Studio staging preview](https://studio-staging-git-dnywh-fixaccordion-trigger-width-supabase.vercel.app), go to **Account > Access Tokens**. 2. Click **Generate new token** and scroll to **Permissions**. 3. Tab to any permission category, then click near the far right of its row. 4. Confirm the focus outline fills the category row, the label keeps its existing inset, and the full row toggles the category. ### Pricing FAQs 1. Open the [Pricing preview](https://zone-www-dot-com-git-dnywh-fixaccordion-trigger-width-supabase.vercel.app/pricing) and scroll to **Frequently asked questions**. 2. Tab to any question, then click near the far right of its row. 3. Confirm the question has not gained extra horizontal inset and the full row remains interactive. ### Design-system Accordion 1. Open the [design-system Accordion preview](https://design-system-git-dnywh-fixaccordion-trigger-width-supabase.vercel.app/docs/components/accordion). 2. Tab through the three accordion triggers and toggle each one. 3. Confirm each focus outline fills its row, with no extra horizontal padding around the label.
packages/ui
Supabase's shared React component library. Built on Radix UI primitives and shadcn/ui, styled with Tailwind CSS, and used across all Supabase apps.
Usage
Import from the 'ui' package alias:
import { Badge, Button, Input } from 'ui'
Some of the components have the _Shadcn_ suffix. These components should be preferred, they're in a process of replacing the other ones.
Utilities
// deep object merge (used for themes)
import { clipboard, cn, mergeDeep } from 'ui' // Tailwind class merging (shadcn-ui/cn)
// copy-to-clipboard helper
Styling conventions
- Tailwind only — no inline styles or CSS modules.
- Prefer shadcn semantic pairs (
bg-card text-card-foreground,bg-muted text-muted-foreground,bg-tertiary text-tertiary-foreground) over hardcoded colors. Legacy utilities such astext-foreground-lightandborder-defaultare compatibility aliases only. - Control surface roles (
bg-field,bg-control-raised,border-control-hover; CSS--controlaliases raised) live inbuild/css/source/semantic.css. Prefer those over inventing fills. Legacybg-controlis still the accent wash alias. - Themes set the core
--hue(or the split--surface-hue/--primary-hue),--chroma,--surface,--foreground-lightness, and--contrastinputs, plus their--muted-foreground-leveland--tertiary-foreground-levelhierarchy. Semantic colors are derived from them in OKLCH;--contrast: 1is the baseline and the supported adjustment range is0.75to1.25. - The workspace root owns the actual
tailwind.config.js. The file in this package is a stub for IntelliSense only.