diff --git a/src/App.tsx b/src/App.tsx
index 2f1ccef3..2c804e4d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -376,6 +376,7 @@ function App() {
             canGoForward={navHistory.canGoForward}
             onGoBack={handleGoBack}
             onGoForward={handleGoForward}
+            leftPanelsCollapsed={!sidebarVisible && !noteListVisible}
           />
         </div>
       </div>
diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx
index c614eb3b..378f5cbf 100644
--- a/src/components/Editor.tsx
+++ b/src/components/Editor.tsx
@@ -59,6 +59,7 @@ interface EditorProps {
   canGoForward?: boolean
   onGoBack?: () => void
   onGoForward?: () => void
+  leftPanelsCollapsed?: boolean
 }
 
 function EditorEmptyState() {
@@ -80,7 +81,7 @@ export const Editor = memo(function Editor({
   vaultPath,
   onTrashNote, onRestoreNote, onArchiveNote, onUnarchiveNote,
   onRenameTab, onContentChange, onTitleSync,
-  canGoBack, canGoForward, onGoBack, onGoForward,
+  canGoBack, canGoForward, onGoBack, onGoForward, leftPanelsCollapsed,
 }: EditorProps) {
   const vaultPathRef = useRef(vaultPath)
   useEffect(() => { vaultPathRef.current = vaultPath }, [vaultPath])
@@ -133,6 +134,7 @@ export const Editor = memo(function Editor({
         canGoForward={canGoForward}
         onGoBack={onGoBack}
         onGoForward={onGoForward}
+        leftPanelsCollapsed={leftPanelsCollapsed}
       />
       <div className="flex flex-1 min-h-0">
         {tabs.length === 0
diff --git a/src/components/TabBar.tsx b/src/components/TabBar.tsx
index f062b38e..b85aaddf 100644
--- a/src/components/TabBar.tsx
+++ b/src/components/TabBar.tsx
@@ -23,6 +23,7 @@ interface TabBarProps {
   canGoForward?: boolean
   onGoBack?: () => void
   onGoForward?: () => void
+  leftPanelsCollapsed?: boolean
 }
 
 const DISABLED_ICON_STYLE = { opacity: 0.4, cursor: 'not-allowed' } as const
@@ -326,7 +327,7 @@ function TabBarActions({ onCreateNote }: { onCreateNote?: () => void }) {
 
 export const TabBar = memo(function TabBar({
   tabs, activeTabPath, getNoteStatus, onSwitchTab, onCloseTab, onCreateNote, onReorderTabs, onRenameTab,
-  canGoBack, canGoForward, onGoBack, onGoForward,
+  canGoBack, canGoForward, onGoBack, onGoForward, leftPanelsCollapsed,
 }: TabBarProps) {
   const { dragIndex, dropIndex, handleDragStart, handleDragEnd, handleDragOver, handleDrop, handleBarDragLeave } = useTabDrag(onReorderTabs)
   const [editingPath, setEditingPath] = useState<string | null>(null)
@@ -335,7 +336,7 @@ export const TabBar = memo(function TabBar({
   return (
     <div
       className="flex shrink-0 items-stretch"
-      style={{ height: 52, background: 'var(--sidebar)' } as React.CSSProperties}
+      style={{ height: 52, background: 'var(--sidebar)', paddingLeft: leftPanelsCollapsed ? 80 : 0 } as React.CSSProperties}
       onDragLeave={handleBarDragLeave}
     >
       <NavButtons canGoBack={canGoBack} canGoForward={canGoForward} onGoBack={onGoBack} onGoForward={onGoForward} />