merge: exit fullscreen on click outside, free Escape key

apps/web/src/pages/terminal.tsx

@@ -162,17 +162,21 @@ export const TerminalPage: React.FC = () => {
 		setActiveSessionId,
 	]);
 
-	// Exit fullscreen on Escape
+	// Click outside terminal content/header to exit fullscreen
-	useEffect(() => {
+	const handleFullscreenClick = useCallback(
-		if (!isFullscreen) return;
+		(e: React.MouseEvent<HTMLElement>) => {
-		const handleEscape = (e: KeyboardEvent) => {
+			if (!isFullscreen) return;
-			if (e.key === "Escape") {
+			const target = e.target as Node;
-				setIsFullscreen(false);
+			const current = e.currentTarget as HTMLElement;
+			const content = current.querySelector(".terminal-page-content");
+			const header = current.querySelector(".terminal-fullscreen-header");
+			if (content?.contains(target) || header?.contains(target)) {
+				return;
 			}
-		};
+			setIsFullscreen(false);
-		window.addEventListener("keydown", handleEscape);
+		},
-		return () => window.removeEventListener("keydown", handleEscape);
+		[isFullscreen],
-	}, [isFullscreen]);
+	);
 
 	const handleSelect = useCallback(
 		(sessionId: string) => {
@@ -302,7 +306,10 @@ export const TerminalPage: React.FC = () => {
 	}
 
 	return (
-		<section className={`terminal-page ${isFullscreen ? "fullscreen" : ""}`}>
+		<section
+			className={`terminal-page ${isFullscreen ? "fullscreen" : ""}`}
+			onClick={handleFullscreenClick}
+		>
 			{!isFullscreen && (
 				<div className="terminal-page-header">
 					<button

apps/web/src/styles.css

@@ -2887,8 +2887,8 @@ a.nav-item,
 	right: 0;
 	bottom: 0;
 	z-index: 1000;
-	padding: 0;
+	padding: 8px;
-	gap: 0;
+	gap: 8px;
 	background: #1e1e1e;
 }