Merge pull request #7069 from HaoyueQin/fix/issue-7030-interface-overlap

fix(desktop): prevent decision cards from overflowing behind the status bar / 修复决策卡片溢出被底部信息栏遮挡

desktop/frontend/src/App.tsx

@@ -3841,6 +3841,7 @@ export default function App() {
           sidebarWorkbench ? "layout--workbench" : "",
           workbenchChromeHidden ? "layout--workbench-chrome-hidden" : "",
           sidebarCreation ? "layout--creation-chrome-hidden" : "",
+          sidebarImDetailConnection ? "layout--statusbar-hidden" : "",
           sidebarCollapsed ? "layout--sidebar-collapsed" : "",
           sidebarResizing ? "layout--resizing layout--sidebar-resizing" : "",
           workspacePanelGridOpen ? "layout--workspace-open" : "",
@@ -4565,37 +4566,6 @@ export default function App() {
               balance={state.balance}
             />
             </div>
-            <StatusBar
-              context={state.context}
-              usage={state.usage}
-              balance={state.balance}
-              running={state.running || rewindCommitting}
-              sessionTurns={sessionTurns}
-              sessionTokens={state.sessionTokens}
-              turnTokens={state.turnTotalTokens}
-              turnCost={state.turnCost}
-              cost={state.sessionCost}
-              currency={state.sessionCurrency}
-              modelLabel={state.meta?.label}
-              labelStyle={statusBarStyle}
-              items={statusBarItems}
-	              workspacePath={state.meta?.workspacePath || state.meta?.workspaceRoot || state.meta?.cwd}
-	              workspaceName={state.meta?.workspaceName}
-	              gitBranch={state.meta?.gitBranch}
-              onConnectRemote={connectAndOpenRemoteWorkspace}
-              onDisconnectRemote={(hostId) => void app.DisconnectRemoteHost(hostId).catch(() => {})}
-              onManageRemote={() => setSettingsTarget("remote")}
-              onOpenRemote={requestRemoteExplorer}
-              onOpenRemoteWorkspace={openRemoteWorkspaceFromStatus}
-              remoteHosts={remoteHosts}
-              remoteStatuses={remoteStatuses}
-              workbenchTarget={workbenchTarget}
-              onSwitchLocal={() => {
-                void app.WorkbenchSwitchLocal()
-                  .then(setWorkbenchTarget)
-                  .catch((err) => showToast(err instanceof Error ? err.message : String(err), "error"));
-              }}
-            />
           </footer>
           )}
           </>
@@ -4744,6 +4714,41 @@ export default function App() {
             </div>
           </aside>
         )}
+
+        {!sidebarImDetailConnection && (
+          <StatusBar
+            context={state.context}
+            usage={state.usage}
+            balance={state.balance}
+            running={state.running || rewindCommitting}
+            sessionTurns={sessionTurns}
+            sessionTokens={state.sessionTokens}
+            turnTokens={state.turnTotalTokens}
+            turnCost={state.turnCost}
+            cost={state.sessionCost}
+            currency={state.sessionCurrency}
+            modelLabel={state.meta?.label}
+            labelStyle={statusBarStyle}
+            items={statusBarItems}
+            workspacePath={state.meta?.workspacePath || state.meta?.workspaceRoot || state.meta?.cwd}
+            workspaceName={state.meta?.workspaceName}
+            gitBranch={state.meta?.gitBranch}
+            onConnectRemote={connectAndOpenRemoteWorkspace}
+            onDisconnectRemote={(hostId) => void app.DisconnectRemoteHost(hostId).catch(() => {})}
+            onManageRemote={() => setSettingsTarget("remote")}
+            onOpenRemote={requestRemoteExplorer}
+            onOpenRemoteWorkspace={openRemoteWorkspaceFromStatus}
+            remoteHosts={remoteHosts}
+            remoteStatuses={remoteStatuses}
+            workbenchTarget={workbenchTarget}
+            onSwitchLocal={() => {
+              void app.WorkbenchSwitchLocal()
+                .then(setWorkbenchTarget)
+                .catch((err) => showToast(err instanceof Error ? err.message : String(err), "error"));
+            }}
+          />
+        )}
+
       </div>
 
       {histView !== null && (

desktop/frontend/src/__tests__/app-chrome-tabs.test.ts

@@ -608,7 +608,7 @@ for (const selector of [
 ]) {
   ok(
     finalDeclaration(selector, "--app-chrome-height") === "0px" &&
-      finalDeclaration(selector, "grid-template-rows") === "minmax(0, 1fr)" &&
+      finalDeclaration(selector, "grid-template-rows") === "minmax(0, 1fr) var(--statusbar-height)" &&
       finalDeclaration(selector, "background") === "var(--bg)",
     `${selector} removes the workbench chrome row`,
   );

desktop/frontend/src/__tests__/workspace-layout.test.ts

@@ -175,9 +175,26 @@ eq(
   "terminal drawer stays visible on narrow viewports",
 );
 eq(
-  /\.layout--terminal-open \.workbench-dock \{[\s\S]*?padding-bottom: var\(--statusbar-height\)/.test(stylesSource),
+  /\.layout--terminal-open \{[\s\S]*?grid-template-rows: var\(--app-chrome-height\) minmax\(0, 1fr\) minmax\(220px, min\(42vh, 440px\)\) var\(--statusbar-height\)/.test(stylesSource),
   true,
-  "terminal drawer reserves the fixed status bar safe area",
+  "terminal-open layout reserves a grid row for the status bar below the terminal drawer",
+);
+eq(
+  /@media \(max-width: 820px\) \{[\s\S]*?\.layout--terminal-open \.workbench-dock,[\s\S]*?grid-row: 3;[\s\S]*?\.layout--workbench-chrome-hidden\.layout--terminal-open \.workbench-dock,[\s\S]*?grid-row: 2;/.test(stylesSource),
+  true,
+  "narrow classic terminal stays below chat while chrome-hidden terminal uses row two",
+);
+eq(
+  /sidebarImDetailConnection \? "layout--statusbar-hidden" : ""/.test(appSource)
+    && /\.layout\.layout--statusbar-hidden,[\s\S]*?--statusbar-height: 0px;/.test(stylesSource),
+  true,
+  "IM detail collapses the status bar row when the bar is not rendered",
+);
+eq(
+  /\.sidebar--workbench \{[\s\S]*?padding: 16px 16px 10px;/.test(stylesSource)
+    && /\.app--darwin \.sidebar--workbench,\s*\.sidebar--workbench \{[\s\S]*?padding: 14px 12px 10px;/.test(stylesSource),
+  true,
+  "workbench sidebar does not reserve the docked status bar twice",
 );
 eq(
   /\.layout--terminal-open \.workbench-dock__tools \{\s*display: none;\s*\}/.test(stylesSource),

desktop/frontend/src/styles.css

@@ -2017,7 +2017,7 @@ a[href] {
   --workspace-resizer-width: 8px;
   --app-chrome-height: 38px;
   --topicbar-height: 56px;
-  --statusbar-height: 0px;
+  --statusbar-height: var(--statusbar-dock-height);
   --chrome-toggle-size: 42px;
   --chrome-left-safe-offset: 0px;
   --chrome-left-toggle-offset: max(var(--sidebar-width), var(--chrome-left-safe-offset));
@@ -2025,7 +2025,7 @@ a[href] {
   position: relative;
   display: grid;
   justify-content: start;
-  grid-template-rows: var(--app-chrome-height) minmax(0, 1fr);
+  grid-template-rows: var(--app-chrome-height) minmax(0, 1fr) var(--statusbar-height);
   grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
   height: 100%;
   min-height: 0;
@@ -2034,6 +2034,11 @@ a[href] {
   transition: grid-template-columns 0.16s ease, min-width 0.16s ease;
 }
 
+.layout.layout--statusbar-hidden,
+:root[data-theme-style] .layout.layout--statusbar-hidden {
+  --statusbar-height: 0px;
+}
+
 .app--darwin .layout {
   --app-chrome-height: 44px;
   --chrome-toggle-size: 36px;
@@ -2085,7 +2090,7 @@ a[href] {
 }
 .layout--terminal-open {
   grid-template-columns: var(--sidebar-expanded-width) minmax(0, 1fr);
-  grid-template-rows: var(--app-chrome-height) minmax(0, 1fr) minmax(220px, min(42vh, 440px));
+  grid-template-rows: var(--app-chrome-height) minmax(0, 1fr) minmax(220px, min(42vh, 440px)) var(--statusbar-height);
 }
 .layout--terminal-open.layout--sidebar-collapsed {
   grid-template-columns: 0px minmax(0, 1fr);
@@ -2096,7 +2101,6 @@ a[href] {
   width: 100%;
   height: auto;
   max-width: none;
-  padding-bottom: var(--statusbar-height);
   border-top: 1px solid var(--border-soft);
   border-left: 0;
 }
@@ -2106,12 +2110,19 @@ a[href] {
 .layout--terminal-open .workspace-panel-resizer {
   display: none;
 }
+.layout--terminal-open .statusbar {
+  grid-row: 4;
+}
 .layout--workbench-chrome-hidden.layout--terminal-open {
-  grid-template-rows: minmax(0, 1fr) minmax(220px, min(42vh, 440px));
+  grid-template-rows: minmax(0, 1fr) minmax(220px, min(42vh, 440px)) var(--statusbar-height);
 }
 .layout--workbench-chrome-hidden.layout--terminal-open .workbench-dock {
   grid-row: 2;
 }
+
+.layout--workbench-chrome-hidden.layout--terminal-open .statusbar {
+  grid-row: 3;
+}
 .app--creation .layout--creation-chrome-hidden.layout--terminal-open {
   grid-template-rows: minmax(0, 1fr) minmax(220px, min(42vh, 440px));
 }
@@ -2127,7 +2138,7 @@ a[href] {
 
 .layout--workbench-chrome-hidden {
   --app-chrome-height: 0px;
-  grid-template-rows: minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr) var(--statusbar-height);
   background: var(--bg);
 }
 
@@ -2139,6 +2150,10 @@ a[href] {
   grid-row: 1;
 }
 
+.layout--workbench-chrome-hidden .statusbar {
+  grid-row: 2;
+}
+
 .app--darwin .layout--workbench-chrome-hidden.layout--sidebar-collapsed .topicbar {
   padding-left: 96px;
 }
@@ -2154,7 +2169,7 @@ a[href] {
   display: flex;
   flex-direction: column;
   min-width: 0;
-  padding: 12px 10px calc(12px + var(--statusbar-height));
+  padding: 12px 10px 12px;
   background: var(--sidebar-bg);
   border-right: 1px solid var(--border-soft);
   --wails-draggable: drag;
@@ -2609,7 +2624,7 @@ a[href] {
   justify-self: start;
   width: 1px;
   min-width: 1px;
-  height: calc(100% - var(--statusbar-height));
+  height: 100%;
   padding: 0;
   border: 0;
   background: var(--border-soft);
@@ -5846,6 +5861,8 @@ body > .mermaid-diagram--fullscreen {
 /* ── footer: composer + status line ──────────────────────────────────────── */
 .footer {
   flex: 0 0 auto;
+  max-height: calc(100% - var(--topicbar-height));
+  overflow-y: auto;
   border-top: 1px solid var(--border-soft);
   background: var(--chat-bg);
   padding: 12px 32px 10px;
@@ -7354,6 +7371,8 @@ body > .mermaid-diagram--fullscreen {
 }
 
 .statusbar {
+  grid-row: 3;
+  grid-column: 1 / -1;
   max-width: var(--maxw);
   margin: 7px auto 0;
   display: flex;
@@ -23686,7 +23705,6 @@ body > .mermaid-diagram--fullscreen {
   height: 100%;
   display: flex;
   flex-direction: column;
-  padding-bottom: var(--statusbar-height);
   background: var(--workspace-files-bg);
   border-left: 1px solid var(--border-soft);
   overflow: hidden;
@@ -25242,7 +25260,7 @@ body > .mermaid-diagram--fullscreen {
 }
 
 .sidebar {
-  padding: 12px 10px calc(12px + var(--statusbar-height));
+  padding: 12px 10px 12px;
   background: var(--sidebar-bg);
   border-right-color: var(--border-soft);
 }
@@ -25722,7 +25740,7 @@ body > .mermaid-diagram--fullscreen {
 
 :root[data-theme-style] .layout--workbench-chrome-hidden {
   --app-chrome-height: 0px;
-  grid-template-rows: minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr) var(--statusbar-height);
   background: var(--bg);
 }
 
@@ -26234,7 +26252,7 @@ body > .mermaid-diagram--fullscreen {
 }
 
 :root[data-theme-style] .sidebar {
-  padding: 14px 12px calc(8px + var(--statusbar-height));
+  padding: 14px 12px 8px;
   background: var(--sidebar-bg);
   border-right: 1px solid var(--border-soft);
 }
@@ -27006,7 +27024,7 @@ body > .mermaid-diagram--fullscreen {
 }
 
 :root[data-theme-style] .footer {
-  padding: 12px 16px 38px;
+  padding: 12px 16px 10px;
   background: color-mix(in srgb, var(--chat-bg) 96%, var(--bg-elev));
   border-top: 1px solid var(--border-soft);
 }
@@ -27168,13 +27186,8 @@ body > .mermaid-diagram--fullscreen {
 }
 
 :root[data-theme-style] .statusbar {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: var(--z-dock);
+  width: 100%;
   max-width: none;
-  width: auto;
   height: var(--statusbar-dock-height);
   min-height: var(--statusbar-dock-height);
   margin: 0;
@@ -28187,12 +28200,12 @@ body > .mermaid-diagram--fullscreen {
   --sidebar-workbench-fill-strong: color-mix(in srgb, var(--bg-elev) 88%, var(--sidebar-bg));
   --sidebar-workbench-active: color-mix(in srgb, var(--accent) 12%, var(--bg-elev));
   --sidebar-workbench-active-border: color-mix(in srgb, var(--accent) 28%, transparent);
-  padding: 16px 16px calc(10px + var(--statusbar-height));
+  padding: 16px 16px 10px;
 }
 
 .app--darwin .sidebar--workbench,
 .sidebar--workbench {
-  padding: 14px 12px calc(10px + var(--statusbar-height));
+  padding: 14px 12px 10px;
 }
 
 .app--darwin .layout--workbench-chrome-hidden .sidebar--workbench {
@@ -29103,6 +29116,10 @@ body > .mermaid-diagram--fullscreen {
   grid-template-rows: minmax(0, 1fr);
 }
 
+.app--creation .statusbar {
+  display: none;
+}
+
 .app--creation .settings-modal-backdrop,
 :root[data-theme-style] .app--creation .settings-modal-backdrop {
   padding: clamp(24px, 5vh, 48px) clamp(0px, calc(54px - (900px - 100vw) * 0.3857), 54px);
@@ -33164,7 +33181,7 @@ body > .mermaid-diagram--fullscreen {
 
   .app .layout--workbench-chrome-hidden.layout--terminal-open,
   :root[data-theme-style] .app .layout--workbench-chrome-hidden.layout--terminal-open {
-    grid-template-rows: minmax(0, 1fr) minmax(220px, min(42vh, 440px));
+    grid-template-rows: minmax(0, 1fr) minmax(220px, min(42vh, 440px)) var(--statusbar-height);
   }
 
   .app .layout--workbench-chrome-hidden.layout--terminal-open .workbench-dock,