diff --git a/apps/web/src/components/terminal.tsx b/apps/web/src/components/terminal.tsx index 75258c1..6403cc6 100644 --- a/apps/web/src/components/terminal.tsx +++ b/apps/web/src/components/terminal.tsx @@ -74,7 +74,6 @@ export const TerminalComponent: React.FC = ({ wsRef.current = ws; ws.onopen = () => { - console.log("[Terminal] WebSocket connected"); setStatus("connected"); setError(null); reconnectAttemptsRef.current = 0; @@ -107,16 +106,13 @@ export const TerminalComponent: React.FC = ({ if (!termRef.current) return; if (event.data instanceof Blob) { - console.log("[Terminal] Received blob data:", event.data.size, "bytes"); event.data.arrayBuffer().then((buffer) => { const data = new Uint8Array(buffer); - console.log("[Terminal] Writing", data.length, "bytes to terminal"); termRef.current?.write(data); }); } else if (typeof event.data === "string") { try { const msg = JSON.parse(event.data); - console.log("[Terminal] Received JSON message:", msg); if (msg.type === "status") { if (msg.status === "connected") { setStatus("connected"); @@ -188,12 +184,7 @@ export const TerminalComponent: React.FC = ({ }, [instanceId]); useEffect(() => { - if (!terminalRef.current) { - console.error("[Terminal] terminalRef is null"); - return; - } - - console.log("[Terminal] Initializing terminal for instance", instanceId, "isMobile:", isMobile); + if (!terminalRef.current) return; // Initialize terminal const currentFontSize = calculateFontSize(); @@ -237,25 +228,18 @@ export const TerminalComponent: React.FC = ({ // Define fitTerminal before connectWebSocket so it's available in onmessage const fitTerminal = () => { - if (!fitAddonRef.current || !termRef.current) { - console.log("[Terminal] fitTerminal: missing refs"); - return; - } + if (!fitAddonRef.current || !termRef.current) return; // Ensure terminal is opened and has valid dimensions - if (termRef.current.cols === 0 || termRef.current.rows === 0) { - console.log("[Terminal] fitTerminal: zero dimensions", termRef.current.cols, termRef.current.rows); - return; - } + if (termRef.current.cols === 0 || termRef.current.rows === 0) return; const oldCols = termRef.current.cols; const oldRows = termRef.current.rows; try { fitAddonRef.current.fit(); - } catch (err) { - console.error("[Terminal] fit error:", err); + } catch { + // Ignore fit errors during initialization return; } const { cols, rows } = termRef.current; - console.log("[Terminal] fitTerminal:", oldCols, "x", oldRows, "->", cols, "x", rows); // Force refresh if dimensions changed and are valid if ((cols !== oldCols || rows !== oldRows) && cols > 0 && rows > 0) { try { @@ -271,24 +255,17 @@ export const TerminalComponent: React.FC = ({ }; // Open xterm first (must happen before fit) - console.log("[Terminal] Opening xterm in container", container.clientWidth, "x", container.clientHeight); term.open(container); ws = connectWebSocket(); // Initial fit after layout settles (terminal must be opened first) const doInitialFit = () => { - if (!container.isConnected) { - console.log("[Terminal] Container not connected yet"); - return; - } + if (!container.isConnected) return; // Ensure container has dimensions before fitting - console.log("[Terminal] Container dimensions:", container.clientWidth, "x", container.clientHeight); if (container.clientWidth > 0 && container.clientHeight > 0) { - console.log("[Terminal] Calling initial fit"); fitTerminal(); } else { // Container not ready yet, try again - console.log("[Terminal] Container has no dimensions, retrying..."); requestAnimationFrame(doInitialFit); } }; diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css index baccc9d..4b0564a 100644 --- a/apps/web/src/styles.css +++ b/apps/web/src/styles.css @@ -3112,17 +3112,27 @@ a.nav-item, Mobile Terminal Styles ============================================ */ - .mobile-terminal-wrapper { +/* Mobile terminal shell - fills viewport */ +.shell.mobile-terminal-shell { + height: 100vh; + height: 100dvh; + overflow: hidden; +} + +.shell.mobile-terminal-shell > * { + flex: 1; + min-height: 0; +} + +.mobile-terminal-wrapper { display: grid; grid-template-rows: auto 1fr auto; grid-template-areas: "header" "content" "keys"; - height: 100vh; - height: 100dvh; /* Dynamic viewport height for mobile */ - max-height: 100vh; - max-height: 100dvh; + flex: 1; + min-height: 0; background: #1e1e1e; position: relative; overflow: hidden;