From 3bd7f1f1468b0f4a2156985108c1fb1069070035 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Mon, 20 Apr 2026 01:46:05 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(electron):=20align=20TabBar?=
 =?UTF-8?q?=20left=20padding=20with=20NavPanel=20width=20on=20initial=20lo?=
 =?UTF-8?q?ad=20(#13981)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

:bug: fix(electron): align TabBar left padding with NavPanel width on initial load

Defer DraggablePanel mount in NavPanelDraggable until `isStatusInit` flips true
so defaultSize captures the hydrated `leftPanelWidth` instead of the pre-hydration
default. Before hydration, render a placeholder div matching the store's current
width so NavigationBar's live-read width stays aligned with the DOM. Also adds
a small paddingRight to NavigationBar for visual balance.

Without this, the TabBar's left edge drifted away from the NavPanel's right edge
whenever the user's persisted panel width differed from the 320px default.
---
 .../Electron/titlebar/NavigationBar.tsx       |  1 +
 .../NavPanel/components/NavPanelDraggable.tsx | 21 +++++++++++--------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/features/Electron/titlebar/NavigationBar.tsx b/src/features/Electron/titlebar/NavigationBar.tsx
index 5f80ef2c6f..74b416a614 100644
--- a/src/features/Electron/titlebar/NavigationBar.tsx
+++ b/src/features/Electron/titlebar/NavigationBar.tsx
@@ -87,6 +87,7 @@ const NavigationBar = memo(() => {
       data-width={leftPanelWidth}
       justify="end"
       style={{
+        paddingRight: 8,
         width: isLeftPanelVisible ? `${leftPanelWidth - 12}px` : '150px',
         transition: !isLeftPanelVisible ? 'width 0.2s' : 'none',
       }}
diff --git a/src/features/NavPanel/components/NavPanelDraggable.tsx b/src/features/NavPanel/components/NavPanelDraggable.tsx
index f2f44ed051..f86dcabbaa 100644
--- a/src/features/NavPanel/components/NavPanelDraggable.tsx
+++ b/src/features/NavPanel/components/NavPanelDraggable.tsx
@@ -106,24 +106,20 @@ const classNames = {
 };
 
 export const NavPanelDraggable = memo<NavPanelDraggableProps>(({ activeContent }) => {
-  const [expand, togglePanel] = useGlobalStore((s) => [
+  const [expand, togglePanel, isStatusInit] = useGlobalStore((s) => [
     systemStatusSelectors.showLeftPanel(s),
     s.toggleLeftPanel,
+    systemStatusSelectors.isStatusInit(s),
   ]);
   const handleSizeChange = useNavPanelSizeChangeHandler();
 
+  // Defer DraggablePanel mount until system status hydrates; otherwise defaultSize
+  // captures the pre-hydration default and the DOM drifts off NavigationBar's live width.
   const defaultWidthRef = useRef(0);
-  if (defaultWidthRef.current === 0) {
+  if (defaultWidthRef.current === 0 && isStatusInit) {
     defaultWidthRef.current = systemStatusSelectors.leftPanelWidth(useGlobalStore.getState());
   }
 
-  const defaultSize = useMemo(
-    () => ({
-      height: '100%',
-      width: defaultWidthRef.current,
-    }),
-    [],
-  );
   const styles = useMemo(
     () => ({
       background: isDesktop && isMacOS() ? 'transparent' : cssVar.colorBgLayout,
@@ -132,6 +128,13 @@ export const NavPanelDraggable = memo<NavPanelDraggableProps>(({ activeContent }
     [],
   );
 
+  if (defaultWidthRef.current === 0) {
+    const pendingWidth = systemStatusSelectors.leftPanelWidth(useGlobalStore.getState());
+    return <div aria-hidden style={{ flexShrink: 0, height: '100%', width: pendingWidth }} />;
+  }
+
+  const defaultSize = { height: '100%', width: defaultWidthRef.current };
+
   return (
     <DraggablePanel
       className={draggableStyles.panel}