From f6363a45fb8a879be7e38adf43abf8afa6728d4f Mon Sep 17 00:00:00 2001 From: brennanb2025 Date: Thu, 11 Jun 2026 12:38:39 -0700 Subject: [PATCH] Fix contextual tour arrow overlap Co-authored-by: Orca --- .../contextual-tour-floating-position.test.ts | 6 +++--- .../contextual-tours/contextual-tour-floating-position.ts | 7 +++---- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/src/renderer/src/components/contextual-tours/contextual-tour-floating-position.test.ts b/src/renderer/src/components/contextual-tours/contextual-tour-floating-position.test.ts index e805f80fa93..0c6bd460618 100644 --- a/src/renderer/src/components/contextual-tours/contextual-tour-floating-position.test.ts +++ b/src/renderer/src/components/contextual-tours/contextual-tour-floating-position.test.ts @@ -94,9 +94,9 @@ describe('contextual tour floating position', () => { expect(Number.isFinite(Number(position.panelPosition.left))).toBe(true) expect(Number.isFinite(Number(position.panelPosition.top))).toBe(true) - // Why: -(height - 1) overlaps the panel by its 1px border so the arrow - // fill covers the border segment beneath its base. - expect(position.arrowPosition[expectedStaticArrowSide(position.panelPlacement)]).toBe(-7) + // Why: the arrow starts just outside the panel border so the card outline + // remains visually clean. + expect(position.arrowPosition[expectedStaticArrowSide(position.panelPlacement)]).toBe(-8) }) // Regression: a tall step panel inside a small dialog host fit no placement, diff --git a/src/renderer/src/components/contextual-tours/contextual-tour-floating-position.ts b/src/renderer/src/components/contextual-tours/contextual-tour-floating-position.ts index 224594edcf4..b667186d8ac 100644 --- a/src/renderer/src/components/contextual-tours/contextual-tour-floating-position.ts +++ b/src/renderer/src/components/contextual-tours/contextual-tour-floating-position.ts @@ -37,9 +37,8 @@ export const CONTEXTUAL_TOUR_ARROW_SIZE = { height: ARROW_HEIGHT } as const -// Why: the arrow overlaps the panel by exactly the border width so its fill -// covers the border segment beneath it — the panel outline then flows around -// the arrow tip instead of cutting across its base. +// Why: keep the arrow just outside the panel border. Letting it overlap the +// border makes the callout look like it is colliding with the tip card outline. export const CONTEXTUAL_TOUR_PANEL_BORDER_WIDTH = 1 export async function getContextualTourFloatingPosition(args: { @@ -141,6 +140,6 @@ function getContextualTourArrowPosition(args: { return { left: args.arrowX, top: args.arrowY, - [staticSide]: -(ARROW_HEIGHT - CONTEXTUAL_TOUR_PANEL_BORDER_WIDTH) + [staticSide]: -ARROW_HEIGHT } }