fix(hud): avoid horizontal scrollbar when recording on Windows

[AmirYunus]

Description

Fixes an unwanted horizontal scrollbar on the recording HUD (the small bottom overlay) on Windows, which appeared after starting a recording when the toolbar widened to show the stop control, timer, and restart button.

The HUD is a fixed 600×160 BrowserWindow (electron/windows.ts). The renderer no longer uses 100vw / 100vh (w-screen / h-screen) for the HUD root. It now uses h-full / w-full with min-w-0, max-w-full, and overflow clipping. The hud-overlay document shell is also pinned to the window via html / body / #root height and hidden overflow so the layout matches the real viewport.

Motivation

Users on Windows 10 with v1.3.0 saw a horizontal scrollbar on the HUD after recording started, even though the overlay should stay within its fixed window. Viewport units and unconstrained overflow produced extra horizontal scroll when the recording controls widened the bar. This change aligns the DOM with the fixed Electron window and removes that overflow.

Type of Change

• Bug Fix

Related Issue(s)

Fixes #305

Testing

npm run lint
npm test
npx tsc --noEmit

To verify the fix: run the app on Windows, open the HUD, select a source, start recording, and confirm no horizontal scrollbar appears on the HUD overlay.

Checklist

• I have performed a self-review of my code.
• I have linked related issue(s).

Summary by CodeRabbit

Release Notes

• Bug Fixes
  • Fixed HUD overlay layout issues by adjusting window sizing from viewport-based to container-relative dimensions.
  • Applied explicit overflow suppression to eliminate horizontal and vertical scrollbars in HUD overlay mode.
  • Updated DOM styling, including height constraints, margin adjustments, and overflow handling, to ensure HUD overlay windows render properly within their containers.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 5c786370-e9ba-4fc9-a97c-27845856faa1

📥 Commits

Reviewing files that changed from the base of the PR and between 21893f0 and 1b980d6.

📒 Files selected for processing (2)

• src/App.tsx
• src/components/launch/LaunchWindow.tsx

---

📝 Walkthrough

Walkthrough

Fixes horizontal and vertical scrollbar artifacts by adjusting layout sizing and CSS overflow properties. LaunchWindow uses container-relative dimensions instead of viewport-fixed sizing, while App applies HUD overlay styling to suppress overflow on root elements.

Changes

Cohort / File(s)	Summary
HUD Overlay Styling src/App.tsx	Adds DOM styling when windowType === "hud-overlay", setting document and body height to 100%, removing margin, and forcing overflow: hidden on HTML and body elements to prevent scrollbars.
LaunchWindow Layout src/components/launch/LaunchWindow.tsx	Replaces viewport-sized dimensions (w-screen h-screen) with container-relative sizing (h-full w-full min-w-0 max-w-full) and explicitly adds overflow-x-hidden overflow-y-hidden to prevent scroll artifacts.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Suggested reviewers

• siddharthvaddem

Poem

🐰 Scrollbars begone, the overlay thrives,
Container-fit layouts and overflow denied,
A HUD that sits, pristine and free,
No horizontal dance—just what should be! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: fixing a horizontal scrollbar issue on the HUD component when recording on Windows.
Description check	✅ Passed	The description covers most required sections including purpose, motivation, type of change, related issues, and testing instructions, though screenshots/videos are not included.
Linked Issues check	✅ Passed	The PR successfully addresses issue #305 by eliminating the horizontal scrollbar through DOM styling changes and layout adjustments that constrain the HUD to its fixed window size.
Out of Scope Changes check	✅ Passed	All changes are focused on fixing the horizontal scrollbar issue: DOM styling in App.tsx and layout adjustments in LaunchWindow.tsx directly support the stated objective.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}