From f09865ed0453c35ec4c8cd92e128884d2f739e08 Mon Sep 17 00:00:00 2001
From: LukeGus <bugattiguy527@gmail.com>
Date: Thu, 8 Oct 2026 00:49:11 -0500
Subject: [PATCH] fix: header separators render as borders and center the
 status divider

---
 src/ui/components/panel-layout.tsx | 10 ++++++----
 src/ui/shell/DockPanel.tsx         | 22 +++++++++-------------
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/ui/components/panel-layout.tsx b/src/ui/components/panel-layout.tsx
index 154e9068b..3071153e3 100644
--- a/src/ui/components/panel-layout.tsx
+++ b/src/ui/components/panel-layout.tsx
@@ -105,10 +105,9 @@ export function PanelShell({
         className={`flex ${PANEL.header} shrink-0 flex-row items-center border-b border-border`}
       >
         {leading && (
-          <>
+          <div className="flex h-full shrink-0 border-r border-border">
             {leading}
-            <Separator orientation="vertical" />
-          </>
+          </div>
         )}
         <div className="flex min-w-0 flex-1 items-center gap-2 px-3">
           {icon && <span className="shrink-0 text-accent-brand">{icon}</span>}
@@ -117,7 +116,10 @@ export function PanelShell({
           </span>
           {status && (
             <>
-              <Separator orientation="vertical" className="h-4 self-center" />
+              <Separator
+                orientation="vertical"
+                className="h-4 data-[orientation=vertical]:self-center"
+              />
               <span className="truncate text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
                 {status}
               </span>
diff --git a/src/ui/shell/DockPanel.tsx b/src/ui/shell/DockPanel.tsx
index 77b1af3bd..cc4933766 100644
--- a/src/ui/shell/DockPanel.tsx
+++ b/src/ui/shell/DockPanel.tsx
@@ -8,7 +8,6 @@ import {
   RotateCcw,
   SquareArrowOutUpRight,
 } from "lucide-react";
-import { Separator } from "@/components/separator";
 import { PANEL } from "@/components/panel-layout";
 import type { EditingWidth } from "@/components/surface/surface-scope";
 import { cn } from "@/lib/utils";
@@ -37,18 +36,15 @@ function HeaderButton({
   children: React.ReactNode;
 }) {
   return (
-    <>
-      <Separator orientation="vertical" />
-      <button
-        type="button"
-        title={title}
-        aria-label={title}
-        onClick={onClick}
-        className="flex h-full w-12.5 shrink-0 items-center justify-center text-muted-foreground transition-colors hover:bg-muted/40 hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring"
-      >
-        {children}
-      </button>
-    </>
+    <button
+      type="button"
+      title={title}
+      aria-label={title}
+      onClick={onClick}
+      className="flex h-full w-12.5 shrink-0 items-center justify-center border-l border-border text-muted-foreground transition-colors hover:bg-muted/40 hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring"
+    >
+      {children}
+    </button>
   );
 }