🤖 fix: keep header + sidebar tabs clear of win/linux titlebar (#1651)

On Windows/Linux desktop with titlebar overlay, the native window
controls (min/max/close) overlap the top-right of the app.

- When the right sidebar is collapsed, the workspace header action
buttons (MCP / open-in-editor / terminal) can end up under the window
controls.
- The right sidebar tab strip can also render/scroll tabs under the
window controls area.

This change reserves a right-side inset in those headers when running on
Windows/Linux so the controls stay visible/clickable.

Validation:
- `make static-check`

---
_Generated with `mux` • Model: `openai:gpt-5.2` • Thinking: `xhigh`_

Author: ibetitsmike

src/browser/components/RightSidebar/RightSidebarTabStrip.tsx

@@ -131,7 +131,7 @@ export const RightSidebarTabStrip: React.FC<RightSidebarTabStripProps> = ({
     <div
       ref={setNodeRef}
       className={cn(
-        "border-border-light flex min-w-0 items-center gap-1 overflow-x-auto border-b px-2 transition-colors",
+        "border-border-light flex min-w-0 items-center border-b px-2 transition-colors",
         isDesktop ? "h-10" : "py-1.5",
         showDropHighlight && "bg-accent/30",
         isDraggingFromHere && "bg-accent/10",
@@ -142,33 +142,42 @@ export const RightSidebarTabStrip: React.FC<RightSidebarTabStripProps> = ({
       role="tablist"
       aria-label={ariaLabel}
     >
-      {items.map((item, index) => (
-        <SortableTab
-          key={item.id}
-          item={item}
-          index={index}
-          tabsetId={tabsetId}
-          isDesktop={isDesktop}
-        />
-      ))}
-      {onAddTerminal && (
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <button
-              type="button"
-              className={cn(
-                "text-muted hover:bg-hover hover:text-foreground shrink-0 rounded-md p-1 transition-colors",
-                isDesktop && "titlebar-no-drag"
-              )}
-              onClick={onAddTerminal}
-              aria-label="New terminal"
-            >
-              <Plus className="h-3.5 w-3.5" />
-            </button>
-          </TooltipTrigger>
-          <TooltipContent side="bottom">New terminal</TooltipContent>
-        </Tooltip>
-      )}
+      <div
+        className={cn(
+          "flex min-w-0 flex-1 items-center gap-1 overflow-x-auto",
+          // In desktop mode, the tab strip sits in the titlebar drag region.
+          // Mark the scroll container as no-drag so horizontal scrolling works.
+          isDesktop && "titlebar-no-drag"
+        )}
+      >
+        {items.map((item, index) => (
+          <SortableTab
+            key={item.id}
+            item={item}
+            index={index}
+            tabsetId={tabsetId}
+            isDesktop={isDesktop}
+          />
+        ))}
+        {onAddTerminal && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                className={cn(
+                  "text-muted hover:bg-hover hover:text-foreground shrink-0 rounded-md p-1 transition-colors",
+                  isDesktop && "titlebar-no-drag"
+                )}
+                onClick={onAddTerminal}
+                aria-label="New terminal"
+              >
+                <Plus className="h-3.5 w-3.5" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">New terminal</TooltipContent>
+          </Tooltip>
+        )}
+      </div>
     </div>
   );
 };

src/browser/components/WorkspaceHeader.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { Pencil, Server } from "lucide-react";
 import { cn } from "@/common/lib/utils";
+import { RIGHT_SIDEBAR_COLLAPSED_KEY } from "@/common/constants/storage";
 import { GitStatusIndicator } from "./GitStatusIndicator";
 import { RuntimeBadge } from "./RuntimeBadge";
 import { BranchSelector } from "./BranchSelector";
@@ -14,7 +15,8 @@ import type { RuntimeConfig } from "@/common/types/runtime";
 import { useTutorial } from "@/browser/contexts/TutorialContext";
 import { useOpenTerminal } from "@/browser/hooks/useOpenTerminal";
 import { useOpenInEditor } from "@/browser/hooks/useOpenInEditor";
-import { isDesktopMode } from "@/browser/hooks/useDesktopTitlebar";
+import { usePersistedState } from "@/browser/hooks/usePersistedState";
+import { getTitlebarRightInset, isDesktopMode } from "@/browser/hooks/useDesktopTitlebar";
 import { WorkspaceLinks } from "./WorkspaceLinks";
 
 interface WorkspaceHeaderProps {
@@ -45,6 +47,11 @@ export const WorkspaceHeader: React.FC<WorkspaceHeaderProps> = ({
   const [editorError, setEditorError] = useState<string | null>(null);
   const [mcpModalOpen, setMcpModalOpen] = useState(false);
 
+  const [rightSidebarCollapsed] = usePersistedState<boolean>(RIGHT_SIDEBAR_COLLAPSED_KEY, false, {
+    // This state is toggled from RightSidebar, so we need cross-component updates.
+    listener: true,
+  });
+
   const handleOpenTerminal = useCallback(() => {
     if (onOpenTerminal) {
       onOpenTerminal();
@@ -78,10 +85,17 @@ export const WorkspaceHeader: React.FC<WorkspaceHeaderProps> = ({
     return () => clearTimeout(timer);
   }, [startTutorial, isSequenceCompleted]);
 
+  // On Windows/Linux, the native window controls overlay the top-right of the app.
+  // When the right sidebar is collapsed (20px), this header stretches underneath
+  // those controls and the MCP/editor/terminal buttons become unclickable.
+  const titlebarRightInset = getTitlebarRightInset();
+  const headerRightPadding =
+    rightSidebarCollapsed && titlebarRightInset > 0 ? Math.max(0, titlebarRightInset - 20) : 0;
   const isDesktop = isDesktopMode();
 
   return (
     <div
+      style={headerRightPadding > 0 ? { paddingRight: headerRightPadding } : undefined}
       data-testid="workspace-header"
       className={cn(
         "bg-sidebar border-border-light flex items-center justify-between border-b px-[15px] [@media(max-width:768px)]:h-auto [@media(max-width:768px)]:flex-wrap [@media(max-width:768px)]:gap-2 [@media(max-width:768px)]:py-2 [@media(max-width:768px)]:pl-[60px]",