fix: allow Escape in terminal, exit fullscreen on click outside

- Remove global Escape key listener that intercepted Escape before
  xterm.js could receive it, breaking vim/tmux/etc.
- Add click-outside-to-exit for fullscreen: clicking on the padding
  area around .terminal-page-content or .terminal-fullscreen-header
  exits fullscreen. Clicks inside content or header are ignored.
- Add 8px padding/gap to .terminal-page.fullscreen to create a
  clickable border area around the terminal.
- Keep Exit button and Alt+Shift+F as explicit exit methods.

Quality gates: tsc --noEmit (clean), pytest (208 passed, 6 pre-existing)
This commit is contained in:
Alex Blank
2026-05-29 11:11:03 +02:00
parent 79ad3b0715
commit fe98f966d6
2 changed files with 20 additions and 13 deletions
+18 -11
View File
@@ -162,17 +162,21 @@ export const TerminalPage: React.FC = () => {
setActiveSessionId,
]);
// Exit fullscreen on Escape
useEffect(() => {
if (!isFullscreen) return;
const handleEscape = (e: KeyboardEvent) => {
if (e.key === "Escape") {
setIsFullscreen(false);
// Click outside terminal content/header to exit fullscreen
const handleFullscreenClick = useCallback(
(e: React.MouseEvent<HTMLElement>) => {
if (!isFullscreen) return;
const target = e.target as Node;
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;
}
};
window.addEventListener("keydown", handleEscape);
return () => window.removeEventListener("keydown", handleEscape);
}, [isFullscreen]);
setIsFullscreen(false);
},
[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
+2 -2
View File
@@ -2887,8 +2887,8 @@ a.nav-item,
right: 0;
bottom: 0;
z-index: 1000;
padding: 0;
gap: 0;
padding: 8px;
gap: 8px;
background: #1e1e1e;
}