Keep canvas headers clear of the Windows window controls

apps/review-desktop/code-oss/src/vs/review/browser/workbench.ts

@@ -1207,6 +1207,21 @@ export class ReviewWorkbench extends Disposable implements IAgentWorkbenchLayout
 		tabStrip.style.setProperty('--review-explorer-width', `${explorerWidth}px`);
 	}
 
+	/** How far Windows and Linux window controls overlap each part. Written only on change; see `publishReviewChromeInset`. */
+	private publishWindowControlsEnd(): void {
+		const titlebarPart = this.getPart(Parts.TITLEBAR_PART);
+		const controlsLeft = this._mainContainerDimension.width - (titlebarPart instanceof MainReviewTitlebarPart ? titlebarPart.chromeInsets.right : 0);
+		for (const part of [this._editorPartContainer, this.getContainer(mainWindow, Parts.REVIEW_ASK_PART)]) {
+			if (!part) {
+				continue;
+			}
+			const end = `${Math.max(0, Math.round(part.getBoundingClientRect().right - controlsLeft))}px`;
+			if (part.style.getPropertyValue('--review-window-controls-end') !== end) {
+				part.style.setProperty('--review-window-controls-end', end);
+			}
+		}
+	}
+
 	private updateReviewChromeInset(): void {
 		this.reviewChromeDragListeners.clear();
 		this.mainContainer.classList.remove('review-tab-dragging');
@@ -1219,6 +1234,7 @@ export class ReviewWorkbench extends Disposable implements IAgentWorkbenchLayout
 		this.reviewChromeTabStrips.length = 0;
 
 		const editorPartContainer = this._editorPartContainer;
+		this.publishWindowControlsEnd();
 		if (!editorPartContainer) {
 			return;
 		}

packages/review/app/src/diagram-styles.ts

@@ -35,9 +35,9 @@ export const diagramStyles = stylex.create({
     alignItems: "center",
     gap: space.s10,
     minWidth: 0,
-    minHeight: "36px",
+    minHeight: "var(--review-fullscreen-header-height, 36px)",
     paddingBlock: 0,
-    paddingRight: space.s12,
+    paddingRight: `calc(${space.s12} + var(--review-fullscreen-end-inset, 0px))`,
     paddingLeft: "calc(14px + var(--review-fullscreen-inset, 0px))",
     borderBottomWidth: "1px",
     borderBottomStyle: "solid",

packages/review/app/src/diagram-tour.tsx

@@ -87,6 +87,7 @@ export function DiagramTourOverlay({
           styles.stage,
           flow && styles.flowStage,
           shellStyles.clearsWindowControls,
+          styles.stageEnd,
         )}
       >
         {children}
@@ -100,7 +101,12 @@ export function DiagramTourOverlay({
         )}
         {...paneResize.separatorProps}
       />
-      <div {...stylex.props(styles.panel, !flow && styles.panelAlone)}>
+      <div
+        {...stylex.props(
+          styles.panel,
+          flow ? styles.panelUnderStage : styles.panelAlone,
+        )}
+      >
         <GuidedTourPanel
           tour={tour}
           activeAnchor={activeAnchor}
@@ -167,6 +173,7 @@ const styles = stylex.create({
     minHeight: 0,
     overflow: "hidden",
     backgroundColor: tokens.bg,
+    "--review-fullscreen-header-height": tokens.reviewPageBarHeight,
   },
   flowOverlay: {
     gridTemplateRows: {
@@ -183,6 +190,13 @@ const styles = stylex.create({
   flowStage: {
     display: "flex",
   },
+  // Only stacked over the panel does the stage reach the controls.
+  stageEnd: {
+    "--review-fullscreen-end-inset": {
+      default: "0px",
+      [narrow]: "var(--review-window-controls-end, 0px)",
+    },
+  },
   resizer: {
     display: { default: null, [narrow]: "none" },
   },
@@ -193,6 +207,13 @@ const styles = stylex.create({
     flexDirection: "column",
     minWidth: 0,
     minHeight: 0,
+    "--review-fullscreen-end-inset": "var(--review-window-controls-end, 0px)",
+  },
+  panelUnderStage: {
+    "--review-fullscreen-end-inset": {
+      default: "var(--review-window-controls-end, 0px)",
+      [narrow]: "0px",
+    },
   },
   // Without its stage, the panel is the left column, under the window
   // controls.

packages/review/app/src/shell-styles.ts

@@ -199,7 +199,7 @@ export const shellStyles = stylex.create({
     justifyContent: "space-between",
     gap: space.s8,
     height: tokens.reviewHeaderHeight,
-    padding: `0 ${space.s12} 0 ${space.s16}`,
+    padding: `0 calc(${space.s12} + var(--review-window-controls-end, 0px)) 0 ${space.s16}`,
     borderBottomWidth: "1px",
     borderBottomStyle: "solid",
     borderBottomColor: tokens.rule,
@@ -213,10 +213,13 @@ export const shellStyles = stylex.create({
   // the far right, on the page's own surface with no rule under it.
   // In Desktop a collapsed sidebar leaves the window controls over the
   // bar's left end; --review-page-bar-inset clears them.
+  // Windows and Linux put them over its right end instead.
   // A fullscreen surface's left column runs under those controls too: its
   // header reads --review-fullscreen-inset to clear them as the page bar does.
   clearsWindowControls: {
     "--review-fullscreen-inset": "var(--review-page-bar-inset, 0px)",
+    "--review-fullscreen-end-inset": "var(--review-window-controls-end, 0px)",
+    "--review-fullscreen-header-height": tokens.reviewPageBarHeight,
   },
   pageBar: {
     height: tokens.reviewPageBarHeight,

packages/review/app/src/side-panel-styles.ts

@@ -100,9 +100,9 @@ export const panelStyles = stylex.create({
     alignItems: "center",
     justifyContent: "space-between",
     gap: space.s12,
-    minHeight: tokens.reviewHeaderHeight,
+    minHeight: `var(--review-fullscreen-header-height, ${tokens.reviewHeaderHeight})`,
     paddingBlock: 0,
-    paddingRight: space.s10,
+    paddingRight: `calc(${space.s10} + var(--review-fullscreen-end-inset, 0px))`,
     paddingLeft: "calc(16px + var(--review-fullscreen-inset, 0px))",
     borderBottomWidth: "1px",
     borderBottomStyle: "solid",
@@ -139,6 +139,7 @@ export const panelStyles = stylex.create({
   // As tall as the window controls beside it, with no rule: the header row
   // of Desktop's Ask panel.
   nativeHeader: {
+    paddingRight: `calc(${space.s10} + var(--review-window-controls-end, 0px))`,
     height: tokens.reviewPageBarHeight,
     minHeight: tokens.reviewPageBarHeight,
     borderBottomWidth: 0,

packages/review/app/src/software-map/SoftwareMap.tsx

@@ -2824,6 +2824,8 @@ const styles = stylex.create({
     backgroundColor: tokens.bg,
     // Its header clears the window controls, as the page bar does.
     "--review-fullscreen-inset": "var(--review-page-bar-inset, 0px)",
+    "--review-fullscreen-end-inset": "var(--review-window-controls-end, 0px)",
+    "--review-fullscreen-header-height": tokens.reviewPageBarHeight,
   },
   frame: {
     position: "relative",
@@ -2873,9 +2875,9 @@ const styles = stylex.create({
     gap: space.s16,
     minWidth: 0,
     alignItems: "center",
-    minHeight: "36px",
+    minHeight: "var(--review-fullscreen-header-height, 36px)",
     paddingBlock: 0,
-    paddingRight: space.s12,
+    paddingRight: `calc(${space.s12} + var(--review-fullscreen-end-inset, 0px))`,
     paddingLeft: "calc(12px + var(--review-fullscreen-inset, 0px))",
     boxShadow: "none",
     fontFamily: tokens.chromeFont,