diff --git a/apps/web/src/components/terminal.tsx b/apps/web/src/components/terminal.tsx index 7d8fa0e..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,10 +106,8 @@ export const TerminalComponent: React.FC = ({ if (!termRef.current) return; if (event.data instanceof Blob) { - console.log("[Terminal] Received blob:", event.data.size, "bytes"); event.data.arrayBuffer().then((buffer) => { const data = new Uint8Array(buffer); - console.log("[Terminal] Writing data to terminal"); termRef.current?.write(data); }); } else if (typeof event.data === "string") { @@ -231,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 { @@ -265,10 +255,7 @@ export const TerminalComponent: React.FC = ({ }; // Open xterm first (must happen before fit) - console.log("[Terminal] Before open - container:", container.clientWidth, "x", container.clientHeight); term.open(container); - console.log("[Terminal] After open - container:", container.clientWidth, "x", container.clientHeight); - console.log("[Terminal] Term dimensions after open:", term.cols, "x", term.rows); ws = connectWebSocket(); // Initial fit after layout settles (terminal must be opened first) diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css index 4b0564a..bf9b56a 100644 --- a/apps/web/src/styles.css +++ b/apps/web/src/styles.css @@ -3125,12 +3125,8 @@ a.nav-item, } .mobile-terminal-wrapper { - display: grid; - grid-template-rows: auto 1fr auto; - grid-template-areas: - "header" - "content" - "keys"; + display: flex; + flex-direction: column; flex: 1; min-height: 0; background: #1e1e1e; @@ -3140,7 +3136,7 @@ a.nav-item, /* Mobile Terminal Header */ .mobile-terminal-header { - grid-area: header; + flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; @@ -3241,12 +3237,11 @@ a.nav-item, /* Mobile Terminal Content */ .mobile-terminal-content { - grid-area: content; + flex: 1; + min-height: 0; overflow: hidden; position: relative; background: #1e1e1e; - min-height: 0; - max-height: 100%; } /* Terminal wrapper - fills content area */ @@ -3280,7 +3275,7 @@ a.nav-item, /* Special Keys Strip */ .special-keys-strip { - grid-area: keys; + flex-shrink: 0; display: flex; align-items: center; gap: 2px;