From 75d26f72926f9c1affb4f191f47349a5224e868d Mon Sep 17 00:00:00 2001 From: thesiti92 Date: Wed, 4 Nov 2026 12:41:46 -0500 Subject: [PATCH 1/2] Keep canvas headers clear of the Windows window controls On Windows and Linux the window controls sit over the right end of the top row. The tour's close button and the page bar's last buttons sat under them. Desktop now publishes how far the controls overlap each part, the top-right headers pad by it, and fullscreen header rows match the controls' height. Fixes #1490. Agent-Session: 9384a605-d9c3-4fb4-90ee-785315d819c8 Agent-Session: e35ee3f1-35bb-443a-a7fa-2d0fcb48c31e Agent-Session: b8a1d0cf-9b38-4aa4-b9f2-62aeab83bfb0 --- .../src/vs/review/browser/workbench.ts | 20 +++++++++++++++ packages/review/app/src/diagram-styles.ts | 4 +-- packages/review/app/src/diagram-tour.tsx | 25 ++++++++++++++++++- packages/review/app/src/shell-styles.ts | 14 ++++++++--- packages/review/app/src/side-panel-styles.ts | 5 ++-- .../app/src/software-map/SoftwareMap.tsx | 6 +++-- 6 files changed, 63 insertions(+), 11 deletions(-) diff --git a/apps/review-desktop/code-oss/src/vs/review/browser/workbench.ts b/apps/review-desktop/code-oss/src/vs/review/browser/workbench.ts index f16813b83..01ed46d6f 100644 --- a/apps/review-desktop/code-oss/src/vs/review/browser/workbench.ts +++ b/apps/review-desktop/code-oss/src/vs/review/browser/workbench.ts @@ -1207,6 +1207,25 @@ export class ReviewWorkbench extends Disposable implements IAgentWorkbenchLayout tabStrip.style.setProperty('--review-explorer-width', `${explorerWidth}px`); } + /** + * How far the titlebar's right cluster, Windows' and Linux's window + * controls, overlaps the editor and Ask parts, so the canvas headers under + * it clear it. 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 +1238,7 @@ export class ReviewWorkbench extends Disposable implements IAgentWorkbenchLayout this.reviewChromeTabStrips.length = 0; const editorPartContainer = this._editorPartContainer; + this.publishWindowControlsEnd(); if (!editorPartContainer) { return; } diff --git a/packages/review/app/src/diagram-styles.ts b/packages/review/app/src/diagram-styles.ts index 14002eb54..ed7ed18aa 100644 --- a/packages/review/app/src/diagram-styles.ts +++ b/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", diff --git a/packages/review/app/src/diagram-tour.tsx b/packages/review/app/src/diagram-tour.tsx index adfca6b8d..a67e61a14 100644 --- a/packages/review/app/src/diagram-tour.tsx +++ b/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} /> -
+
Date: Wed, 4 Nov 2026 12:45:41 -0500 Subject: [PATCH 2/2] Trim comments Agent-Session: 9384a605-d9c3-4fb4-90ee-785315d819c8 Agent-Session: e35ee3f1-35bb-443a-a7fa-2d0fcb48c31e Agent-Session: b8a1d0cf-9b38-4aa4-b9f2-62aeab83bfb0 --- .../code-oss/src/vs/review/browser/workbench.ts | 6 +----- packages/review/app/src/diagram-tour.tsx | 4 +--- packages/review/app/src/shell-styles.ts | 11 ++++------- 3 files changed, 6 insertions(+), 15 deletions(-) diff --git a/apps/review-desktop/code-oss/src/vs/review/browser/workbench.ts b/apps/review-desktop/code-oss/src/vs/review/browser/workbench.ts index 01ed46d6f..d28428ebe 100644 --- a/apps/review-desktop/code-oss/src/vs/review/browser/workbench.ts +++ b/apps/review-desktop/code-oss/src/vs/review/browser/workbench.ts @@ -1207,11 +1207,7 @@ export class ReviewWorkbench extends Disposable implements IAgentWorkbenchLayout tabStrip.style.setProperty('--review-explorer-width', `${explorerWidth}px`); } - /** - * How far the titlebar's right cluster, Windows' and Linux's window - * controls, overlaps the editor and Ask parts, so the canvas headers under - * it clear it. Written only on change; see `publishReviewChromeInset`. - */ + /** 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); diff --git a/packages/review/app/src/diagram-tour.tsx b/packages/review/app/src/diagram-tour.tsx index a67e61a14..5a1774541 100644 --- a/packages/review/app/src/diagram-tour.tsx +++ b/packages/review/app/src/diagram-tour.tsx @@ -173,7 +173,6 @@ const styles = stylex.create({ minHeight: 0, overflow: "hidden", backgroundColor: tokens.bg, - // The stage's and the panel's headers line up with the window controls. "--review-fullscreen-header-height": tokens.reviewPageBarHeight, }, flowOverlay: { @@ -191,8 +190,7 @@ const styles = stylex.create({ flowStage: { display: "flex", }, - // Beside the panel, the stage is the left column; stacked over it, the - // stage is the top row and runs under the window controls on the right. + // Only stacked over the panel does the stage reach the controls. stageEnd: { "--review-fullscreen-end-inset": { default: "0px", diff --git a/packages/review/app/src/shell-styles.ts b/packages/review/app/src/shell-styles.ts index 84a6b141a..e6ffd6b4d 100644 --- a/packages/review/app/src/shell-styles.ts +++ b/packages/review/app/src/shell-styles.ts @@ -212,13 +212,10 @@ export const shellStyles = stylex.create({ // Notion's page bar: where you are at the far left, what you can do at // 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. On Windows and - // Linux they sit over its right end; --review-window-controls-end clears - // them. - // A fullscreen surface runs under those controls too: its headers read - // --review-fullscreen-inset and --review-fullscreen-end-inset to clear them, - // and --review-fullscreen-header-height to match their height, as the page - // bar does. + // 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)",