dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-05 09:25:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix(design system documentation): remove unwanted horizontal scroll caused by separator styles (#46584)

Browse Source 
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Fix the design system documentation in UI Patterns/ Form section.

## What is the current behavior?

The form panels have horizontal scrolling due to the style of the
separators

<img width="2107" height="1255" alt="260602_before"
src="https://github.com/user-attachments/assets/3714e751-425f-4f97-82f5-9d55e357a8eb"
/>

The MultiSelector components originally used a complex style, which has
been simplified without affecting the visual appearance.

## What is the new behavior?

The style of the MultiSelector components has been simplified.

There is no longer any horizontal scrolling in the form panel.

<img width="2107" height="1255" alt="260602_after"
src="https://github.com/user-attachments/assets/c59da9c5-d383-47d8-9644-b7993417b6ca"
/>


## Additional context

The style has not been changed.

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

* **Style**
* Standardized separator layout in the form patterns side panel to use
full-width spacing, improving visual consistency and alignment across
panels.
* Relaxed the multi-selector trigger width constraint so it now fills
available space, allowing more flexible and cohesive layout behavior
without altering form behavior or validation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
This commit is contained in:
ChloeGarciaMillerandandGildas Garcia authored and GitHub committed 2026-06-03 09:33:17 +02:00
1 parent b28f91741f
commit 3701302b84
1 file changed
+16 -16
Download Patch File Download Diff File Expand all files Collapse all files
apps/design-system/registry/default/example/form-patterns-sidepanel.tsx
+16 -16
View File
@@ -176,7 +176,7 @@ export default function FormPatternsSidePanel() {
/>
</SheetSection>
<Separator className="-mx-5 w-[calc(100%+2.5rem)]" />
<Separator className="w-full" />
{/* Password Input */}
<SheetSection>
@@ -197,7 +197,7 @@ export default function FormPatternsSidePanel() {
/>
</SheetSection>
<Separator className="-mx-5 w-[calc(100%+2.5rem)]" />
<Separator className="w-full" />
{/* Copyable Input */}
<SheetSection>
@@ -225,7 +225,7 @@ export default function FormPatternsSidePanel() {
/>
</SheetSection>
<Separator className="-mx-5 w-[calc(100%+2.5rem)]" />
<Separator className="w-full" />
{/* Number Input */}
<SheetSection>
@@ -246,7 +246,7 @@ export default function FormPatternsSidePanel() {
/>
</SheetSection>
<Separator className="-mx-5 w-[calc(100%+2.5rem)]" />
<Separator className="w-full" />
{/* Input with Units */}
<SheetSection>
@@ -272,7 +272,7 @@ export default function FormPatternsSidePanel() {
/>
</SheetSection>
<Separator className="-mx-5 w-[calc(100%+2.5rem)]" />
<Separator className="w-full" />
{/* Textarea */}
<SheetSection>
@@ -298,7 +298,7 @@ export default function FormPatternsSidePanel() {
/>
</SheetSection>
<Separator className="-mx-5 w-[calc(100%+2.5rem)]" />
<Separator className="w-full" />
{/* Icon Upload */}
<SheetSection>
@@ -366,7 +366,7 @@ export default function FormPatternsSidePanel() {
/>
</SheetSection>
<Separator className="-mx-5 w-[calc(100%+2.5rem)]" />
<Separator className="w-full" />
{/* File Upload */}
<SheetSection>
@@ -459,7 +459,7 @@ export default function FormPatternsSidePanel() {
/>
</SheetSection>
<Separator className="-mx-5 w-[calc(100%+2.5rem)]" />
<Separator className="w-full" />
{/* Switch */}
<SheetSection>
@@ -555,7 +555,7 @@ export default function FormPatternsSidePanel() {
</FormItemLayout>
</SheetSection>
<Separator className="-mx-5 w-[calc(100%+2.5rem)]" />
<Separator className="w-full" />
{/* Select */}
<SheetSection>
@@ -585,7 +585,7 @@ export default function FormPatternsSidePanel() {
/>
</SheetSection>
<Separator className="-mx-5 w-[calc(100%+2.5rem)]" />
<Separator className="w-full" />
{/* Multi-Select */}
<SheetSection>
@@ -611,7 +611,7 @@ export default function FormPatternsSidePanel() {
badgeLimit="wrap"
showIcon={false}
deletableBadge
className="w-full min-w-lg!"
className="w-full"
/>
<MultiSelectorContent>
<MultiSelectorList>
@@ -627,7 +627,7 @@ export default function FormPatternsSidePanel() {
/>
</SheetSection>
<Separator className="-mx-5 w-[calc(100%+2.5rem)]" />
<Separator className="w-full" />
{/* Radio Group */}
<SheetSection>
@@ -659,7 +659,7 @@ export default function FormPatternsSidePanel() {
/>
</SheetSection>
<Separator className="-mx-5 w-[calc(100%+2.5rem)]" />
<Separator className="w-full" />
{/* Date Picker */}
<SheetSection>
@@ -698,7 +698,7 @@ export default function FormPatternsSidePanel() {
/>
</SheetSection>
<Separator className="-mx-5 w-[calc(100%+2.5rem)]" />
<Separator className="w-full" />
{/* Field Array */}
<SheetSection>
@@ -727,7 +727,7 @@ export default function FormPatternsSidePanel() {
/>
</SheetSection>
<Separator className="-mx-5 w-[calc(100%+2.5rem)]" />
<Separator className="w-full" />
{/* Key/Value Field Array */}
<SheetSection>
@@ -758,7 +758,7 @@ export default function FormPatternsSidePanel() {
/>
</SheetSection>
<Separator className="-mx-5 w-[calc(100%+2.5rem)]" />
<Separator className="w-full" />
{/* Action Field */}
<SheetSection>