From 45f060899e56d8a8d218529733075814148f6b19 Mon Sep 17 00:00:00 2001
From: oobabooga <oobabooga4@gmail.com>
Date: Thu, 18 Jun 2026 20:05:02 -0300
Subject: [PATCH] studio/frontend: align custom titlebar sidebar surface with
 the real sidebar (#6455)

---
 studio/frontend/src/components/tauri/window-titlebar.tsx | 8 ++++++--
 studio/frontend/src/components/ui/sidebar.tsx            | 2 ++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/studio/frontend/src/components/tauri/window-titlebar.tsx b/studio/frontend/src/components/tauri/window-titlebar.tsx
index 2ef3258902..96556a7999 100644
--- a/studio/frontend/src/components/tauri/window-titlebar.tsx
+++ b/studio/frontend/src/components/tauri/window-titlebar.tsx
@@ -1,6 +1,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 // Copyright 2026-present the Unsloth AI Inc. team. All rights reserved. See /studio/LICENSE.AGPL-3.0
 
+import { SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from "@/components/ui/sidebar";
 import { useSidebarPin } from "@/hooks/use-sidebar-pin";
 import { isTauri } from "@/lib/api-base";
 import { cn } from "@/lib/utils";
@@ -243,8 +244,11 @@ export function WindowTitlebar({
       >
         {showSidebarSurface && (
           <div
-            className="h-full shrink-0 border-r border-sidebar-border bg-sidebar"
-            style={{ width: pinned ? "16rem" : "3rem" }}
+            className={cn(
+              "h-full shrink-0 border-r border-sidebar-border dark:border-r-0",
+              pinned ? "bg-sidebar" : "bg-white dark:bg-background",
+            )}
+            style={{ width: pinned ? SIDEBAR_WIDTH : SIDEBAR_WIDTH_ICON }}
             onMouseDown={handleDragMouseDown}
             onDoubleClick={handleDragDoubleClick}
             aria-hidden="true"
diff --git a/studio/frontend/src/components/ui/sidebar.tsx b/studio/frontend/src/components/ui/sidebar.tsx
index eb1e1e1eaf..0a71753899 100644
--- a/studio/frontend/src/components/ui/sidebar.tsx
+++ b/studio/frontend/src/components/ui/sidebar.tsx
@@ -766,4 +766,6 @@ export {
   SidebarSeparator,
   SidebarTrigger,
   useSidebar,
+  SIDEBAR_WIDTH,
+  SIDEBAR_WIDTH_ICON,
 }