From 69abb0390d70874c1b3ab5438ae324660eb21e0b Mon Sep 17 00:00:00 2001 From: Andrii-Vovk Date: Tue, 14 Apr 2026 18:17:19 +0300 Subject: [PATCH] fix(highlight): screen highlight clipping on macOS On macOS, the screen highlight overlay's right and bottom edges were running off-screen. macOS clamps window positions below the menu bar, so the outward padding only appeared on the left/top while the right/bottom extended beyond the visible area. Use display workArea instead of full bounds for screen highlights on macOS, and keep the border/glow within the overlay window. --- electron/ipc/recording/ffmpeg.ts | 8 ++++++++ electron/ipc/register/sources.ts | 23 ++++++++++++++++++----- 2 files changed, 26 insertions(+), 5 deletions(-) diff --git a/electron/ipc/recording/ffmpeg.ts b/electron/ipc/recording/ffmpeg.ts index 2d486d16..ab5d436c 100644 --- a/electron/ipc/recording/ffmpeg.ts +++ b/electron/ipc/recording/ffmpeg.ts @@ -16,6 +16,14 @@ export function getDisplayBoundsForSource(source: SelectedSource) { ).bounds; } +export function getDisplayWorkAreaForSource(source: SelectedSource) { + const allDisplays = getScreen().getAllDisplays(); + const primaryDisplay = getScreen().getPrimaryDisplay(); + const { displayId } = resolveWindowsCaptureDisplay(source, allDisplays, primaryDisplay); + const matched = allDisplays.find((d) => d.id === displayId) ?? primaryDisplay; + return matched.workArea; +} + export async function buildFfmpegCaptureArgs(source: SelectedSource, outputPath: string) { const commonOutputArgs = [ "-an", diff --git a/electron/ipc/register/sources.ts b/electron/ipc/register/sources.ts index 43398912..a5e6d601 100644 --- a/electron/ipc/register/sources.ts +++ b/electron/ipc/register/sources.ts @@ -5,7 +5,7 @@ import { ALLOW_RECORDLY_WINDOW_CAPTURE } from "../constants"; import { selectedSource, setSelectedSource } from "../state"; import type { SelectedSource } from "../types"; import { getScreen, parseWindowId } from "../utils"; -import { getDisplayBoundsForSource } from "../recording/ffmpeg"; +import { getDisplayBoundsForSource, getDisplayWorkAreaForSource } from "../recording/ffmpeg"; import { getNativeMacWindowSources, resolveMacWindowBounds, @@ -337,7 +337,10 @@ export function registerSourceHandlers({ let bounds: { x: number; y: number; width: number; height: number } | null = null; if (source.id?.startsWith("screen:")) { - bounds = getDisplayBoundsForSource(source); + bounds = + process.platform === "darwin" + ? getDisplayWorkAreaForSource(source) + : getDisplayBoundsForSource(source); } else if (isWindow) { if (process.platform === "darwin") { bounds = await resolveMacWindowBounds(source); @@ -363,7 +366,12 @@ export function registerSourceHandlers({ const resolvedBounds = bounds; // ── 3. Show traveling wave highlight ── - const pad = 6; + // On macOS, screen highlights use workArea and no outward padding — + // macOS clamps window positions below the menu bar so outward + // padding only works on the left/top while right/bottom run off-screen. + const isScreen = source.id?.startsWith("screen:"); + const isMacScreen = isScreen && process.platform === "darwin"; + const pad = isMacScreen ? 0 : 6; const highlightWin = new BrowserWindow({ x: resolvedBounds.x - pad, y: resolvedBounds.y - pad, @@ -381,13 +389,18 @@ export function registerSourceHandlers({ highlightWin.setIgnoreMouseEvents(true); + const borderRadius = isMacScreen ? 0 : 10; + const glowInset = isMacScreen ? 0 : -4; + const glowRadius = isMacScreen ? 0 : 14; + const glowPad = isMacScreen ? 3 : 6; + const html = `