From 3701302b84ec3754d825dc8206a3d6d7b52e5f13 Mon Sep 17 00:00:00 2001
From: ChloeGarciaMillerand <chloe@garcia.cloud>
Date: Wed, 3 Jun 2026 09:33:17 +0200
Subject: [PATCH] fix(design system documentation): remove unwanted horizontal
 scroll caused by separator styles (#46584)

## 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>
---
 .../example/form-patterns-sidepanel.tsx       | 32 +++++++++----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/apps/design-system/registry/default/example/form-patterns-sidepanel.tsx b/apps/design-system/registry/default/example/form-patterns-sidepanel.tsx
index 15b907d6195..6c729295442 100644
--- a/apps/design-system/registry/default/example/form-patterns-sidepanel.tsx
+++ b/apps/design-system/registry/default/example/form-patterns-sidepanel.tsx
@@ -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>