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:
@@ -162,17 +162,21 @@ export const TerminalPage: React.FC = () => {
|
|||||||
setActiveSessionId,
|
setActiveSessionId,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// Exit fullscreen on Escape
|
// Click outside terminal content/header to exit fullscreen
|
||||||
useEffect(() => {
|
const handleFullscreenClick = useCallback(
|
||||||
|
(e: React.MouseEvent<HTMLElement>) => {
|
||||||
if (!isFullscreen) return;
|
if (!isFullscreen) return;
|
||||||
const handleEscape = (e: KeyboardEvent) => {
|
const target = e.target as Node;
|
||||||
if (e.key === "Escape") {
|
const current = e.currentTarget as HTMLElement;
|
||||||
setIsFullscreen(false);
|
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(
|
const handleSelect = useCallback(
|
||||||
(sessionId: string) => {
|
(sessionId: string) => {
|
||||||
@@ -302,7 +306,10 @@ export const TerminalPage: React.FC = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className={`terminal-page ${isFullscreen ? "fullscreen" : ""}`}>
|
<section
|
||||||
|
className={`terminal-page ${isFullscreen ? "fullscreen" : ""}`}
|
||||||
|
onClick={handleFullscreenClick}
|
||||||
|
>
|
||||||
{!isFullscreen && (
|
{!isFullscreen && (
|
||||||
<div className="terminal-page-header">
|
<div className="terminal-page-header">
|
||||||
<button
|
<button
|
||||||
|
|||||||
@@ -2887,8 +2887,8 @@ a.nav-item,
|
|||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
padding: 0;
|
padding: 8px;
|
||||||
gap: 0;
|
gap: 8px;
|
||||||
background: #1e1e1e;
|
background: #1e1e1e;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user