Fix HUD layout and overlay sizing

src/components/launch/LaunchWindow.module.css

@@ -9,13 +9,16 @@
 .bar {
 	display: flex;
 	align-items: center;
-	gap: 8px;
+	gap: 10px;
+	width: max-content;
+	max-width: 1200px;
 	background: rgba(18, 18, 24, 0.97);
 	border: 1px solid rgba(255, 255, 255, 0.07);
-	border-radius: 18px;
-	padding: 10px 14px;
+	border-radius: 20px;
+	padding: 11px 20px 11px 18px;
 	box-shadow:
-		0 8px 40px rgba(0, 0, 0, 0.45),
+		0 10px 30px rgba(0, 0, 0, 0.24),
+		0 2px 10px rgba(0, 0, 0, 0.12),
 		inset 0 1px 0 rgba(255, 255, 255, 0.04);
 	overflow: visible;
 	position: relative;
@@ -26,16 +29,19 @@
 	position: relative;
 	display: flex;
 	align-items: center;
+	flex: 0 1 auto;
 	min-height: 46px;
-	min-width: 0;
+	min-width: fit-content;
+	padding-right: 2px;
 }
 
 .barState {
 	display: flex;
 	align-items: center;
 	gap: 8px;
+	flex: 0 1 auto;
 	white-space: nowrap;
-	min-width: 0;
+	min-width: fit-content;
 	pointer-events: auto;
 }
 
@@ -43,7 +49,7 @@
 	width: 1px;
 	height: 26px;
 	background: #2a2a34;
-	margin: 0 4px;
+	margin: 0 6px;
 	flex-shrink: 0;
 }
 
@@ -98,6 +104,8 @@
 	align-items: center;
 	gap: 7px;
 	height: 40px;
+	min-width: 0;
+	max-width: 640px;
 	padding: 0 14px 0 12px;
 	border-radius: 11px;
 	border: 1px solid #2a2a34;
@@ -107,7 +115,7 @@
 	font-weight: 500;
 	cursor: pointer;
 	transition: all 0.15s ease;
-	flex-shrink: 0;
+	flex: 0 1 auto;
 }
 
 .screenSel:hover {
@@ -115,13 +123,22 @@
 	background: #20202a;
 }
 
+.sourceLabel {
+	display: inline-block;
+	min-width: 0;
+	max-width: 520px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
 .menuArea {
 	flex: 1;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	pointer-events: none;
-	overflow: hidden;
+	overflow: visible;
 	min-height: 0;
 }
 
@@ -135,7 +152,9 @@
 	padding: 8px;
 	margin-top: auto;
 	margin-bottom: 8px;
-	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
+	box-shadow:
+		0 12px 32px rgba(0, 0, 0, 0.22),
+		0 2px 10px rgba(0, 0, 0, 0.1);
 	pointer-events: auto;
 	animation: menuCardIn 0.18s ease;
 }

src/components/launch/LaunchWindow.tsx

@@ -175,6 +175,7 @@ export function LaunchWindow() {
 	const [hideHudFromCapture, setHideHudFromCapture] = useState(true);
 	const [platform, setPlatform] = useState<string | null>(null);
 	const dropdownRef = useRef<HTMLDivElement>(null);
+	const hudBarRef = useRef<HTMLDivElement>(null);
 	const webcamPreviewRef = useRef<HTMLVideoElement | null>(null);
 
 	const micDropdownOpen = activeDropdown === "mic";
@@ -358,6 +359,43 @@ export function LaunchWindow() {
 		};
 	}, [activeDropdown]);
 
+	useEffect(() => {
+		const hudBar = hudBarRef.current;
+		if (!hudBar || typeof ResizeObserver === "undefined") {
+			return;
+		}
+
+		let frameId = 0;
+		const reportWidth = () => {
+			frameId = 0;
+			const measuredWidth = Math.ceil(
+				Math.max(hudBar.getBoundingClientRect().width, hudBar.scrollWidth) + 24,
+			);
+			window.electronAPI.setHudOverlayCompactWidth(measuredWidth);
+		};
+
+		const scheduleWidthReport = () => {
+			if (frameId !== 0) {
+				cancelAnimationFrame(frameId);
+			}
+			frameId = requestAnimationFrame(reportWidth);
+		};
+
+		scheduleWidthReport();
+
+		const resizeObserver = new ResizeObserver(() => {
+			scheduleWidthReport();
+		});
+		resizeObserver.observe(hudBar);
+
+		return () => {
+			resizeObserver.disconnect();
+			if (frameId !== 0) {
+				cancelAnimationFrame(frameId);
+			}
+		};
+	}, [selectedSource, recording, paused, activeDropdown]);
+
 	useEffect(() => {
 		const handleClick = (e: MouseEvent) => {
 			if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
@@ -528,7 +566,9 @@ export function LaunchWindow() {
 				title={selectedSource}
 			>
 				<Monitor size={16} />
-				<ContentClamp truncateLength={10}>{selectedSource}</ContentClamp>
+				<ContentClamp className={styles.sourceLabel} truncateLength={36}>
+					{selectedSource}
+				</ContentClamp>
 				<ChevronUp size={10} className={`text-[#6b6b78] ml-0.5 transition-transform duration-200 ${activeDropdown === "sources" ? "" : "rotate-180"}`} />
 			</button>
 
@@ -805,6 +845,7 @@ export function LaunchWindow() {
 
 				<div className="flex flex-col items-center pointer-events-auto">
 					<motion.div
+						ref={hudBarRef}
 						layout
 						transition={hudStateTransition}
 						className={`${styles.bar} ${styles.electronDrag} mb-2`}