From 0c7920d3e640d409338a3dac7de0bfe4c5091c9f Mon Sep 17 00:00:00 2001
From: Boram Yi <byi@tetrascience.com>
Date: Tue, 23 Jun 2026 19:08:43 -0400
Subject: [PATCH] fix(sidebar): keep SidebarSeparator within the rail when
 collapsed
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`SidebarSeparator` tried to override the base `Separator`'s
`data-horizontal:w-full` with a plain `w-auto`. tailwind-merge keys those
under different variants, so both survived and `w-full` won — the divider
rendered at full rail width *plus* its `mx-2` margins, spilling ~8px past
the right edge. Most visible in the collapsed icon rail, where the line
crossed the rail border into the content area.

Override on the matching variant (`data-horizontal:w-auto`) so it dedupes
against `data-horizontal:w-full`. `width: auto` then subtracts the `mx-2`
margins, leaving the separator inset and centered under the icon column.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/ui/sidebar.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/ui/sidebar.tsx b/src/components/ui/sidebar.tsx
index aa83295d..112ee825 100644
--- a/src/components/ui/sidebar.tsx
+++ b/src/components/ui/sidebar.tsx
@@ -355,11 +355,15 @@ function SidebarSeparator({
   className,
   ...props
 }: React.ComponentProps<typeof Separator>) {
+  // `data-horizontal:w-auto` (not a plain `w-auto`) so it dedupes against the base
+  // Separator's `data-horizontal:w-full`; otherwise both survive tailwind-merge and
+  // the line stays full-width, overflowing the `mx-2` inset (most visible in the
+  // collapsed icon rail, where it spilled past the right edge).
   return (
     <Separator
       data-slot="sidebar-separator"
       data-sidebar="separator"
-      className={cn("mx-2 w-auto bg-sidebar-border", className)}
+      className={cn("mx-2 data-horizontal:w-auto bg-sidebar-border", className)}
       {...props}
     />
   )