From 1b980d626434bf117cf0a360bf304572ae59c2ba Mon Sep 17 00:00:00 2001
From: Amir Yunus <54809019+AmirYunus@users.noreply.github.com>
Date: Sun, 5 Apr 2026 01:29:46 +0800
Subject: [PATCH] fix(hud): avoid horizontal scrollbar when recording on
 Windows
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Use full-size layout and overflow clipping instead of 100vw/100vh on the HUD shell so the fixed 600×160 overlay does not gain a horizontal scrollbar when recording widens the toolbar.

Fixes #305
---
 src/App.tsx                            | 16 ++++++++++++++++
 src/components/launch/LaunchWindow.tsx |  7 ++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/App.tsx b/src/App.tsx
index 9772ef8..985ecc7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -21,6 +21,22 @@ export default function App() {
 			document.getElementById("root")?.style.setProperty("background", "transparent");
 		}
 
+		// HUD window is a small fixed-size BrowserWindow (`electron/windows.ts`), not a full-screen
+		// surface. Pin the document shell to that viewport and hide overflow so the renderer cannot
+		// introduce scrollbars. Without this, `h-full` in `LaunchWindow` has no definite height chain
+		// from `html`/`body`, and stray overflow can still appear on some hosts (see issue #305).
+		if (type === "hud-overlay") {
+			document.documentElement.style.height = "100%";
+			document.documentElement.style.overflow = "hidden";
+			document.body.style.height = "100%";
+			document.body.style.margin = "0";
+			document.body.style.overflow = "hidden";
+			const root = document.getElementById("root");
+			root?.style.setProperty("height", "100%");
+			root?.style.setProperty("min-height", "0");
+			root?.style.setProperty("overflow", "hidden");
+		}
+
 		// Load custom fonts on app initialization
 		loadAllCustomFonts().catch((error) => {
 			console.error("Failed to load custom fonts:", error);
diff --git a/src/components/launch/LaunchWindow.tsx b/src/components/launch/LaunchWindow.tsx
index f1b66b8..5c5ec92 100644
--- a/src/components/launch/LaunchWindow.tsx
+++ b/src/components/launch/LaunchWindow.tsx
@@ -241,7 +241,12 @@ export function LaunchWindow() {
 	};
 
 	return (
-		<div className={`w-screen h-screen bg-transparent ${styles.electronDrag}`}>
+		// Root fills the HUD window only. Avoid `w-screen`/`h-screen` (`100vw`/`100vh`): `100vw` can
+		// exceed the inner layout width when scrollbars affect the viewport (notably on Windows), which
+		// showed up as a horizontal scrollbar once recording widened the toolbar (issue #305).
+		<div
+			className={`h-full w-full min-w-0 max-w-full overflow-x-hidden overflow-y-hidden bg-transparent ${styles.electronDrag}`}
+		>
 			{/* Language switcher — top-left, beside traffic lights */}
 			<div
 				className={`fixed top-2 flex items-center gap-1 px-2 py-1 rounded-md text-white/50 hover:text-white/90 hover:bg-white/10 transition-all duration-150 ${isMac ? "left-[72px]" : "left-2"} ${styles.electronNoDrag}`}