From fd11f57936972318e4e5bc63f1d345fb8bbcde78 Mon Sep 17 00:00:00 2001
From: Developer <dev@headquarter.local>
Date: Mon, 15 Jun 2026 11:54:53 +0000
Subject: [PATCH] fix: prevent terminal component from exceeding its container

- Constrain .terminalContainer to its parent via position: relative; overflow: hidden
- Force xterm canvas/viewport/screen to fill container height and width
- Make terminal-page a flex column with height: 100% and min-height: 0
- Add dedicated styles/pages/terminal.css and import it in main.tsx

Quality gates: typecheck, lint, build pass; 72/75 tests pass (3 pre-existing unrelated failures)
---
 .../features/terminal/TerminalComponent.module.css | 14 ++++++++++++++
 apps/web/src/main.tsx                              |  1 +
 apps/web/src/styles/pages/terminal.css             | 14 ++++++++++++++
 3 files changed, 29 insertions(+)
 create mode 100644 apps/web/src/styles/pages/terminal.css

diff --git a/apps/web/src/components/features/terminal/TerminalComponent.module.css b/apps/web/src/components/features/terminal/TerminalComponent.module.css
index 578b480..6f3bf93 100644
--- a/apps/web/src/components/features/terminal/TerminalComponent.module.css
+++ b/apps/web/src/components/features/terminal/TerminalComponent.module.css
@@ -67,12 +67,26 @@
 .terminalContainer {
   flex: 1;
   min-height: 0;
+  position: relative;
+  overflow: hidden;
+}
+
+.terminalContainer :global(.xterm) {
+  position: absolute;
+  inset: 0;
+  height: 100% !important;
+  width: 100% !important;
 }
 
 .terminalContainer :global(.xterm-viewport) {
+  height: 100% !important;
   background: #1e1e1e !important;
 }
 
+.terminalContainer :global(.xterm-screen) {
+  height: 100% !important;
+}
+
 .terminalOverlay {
   position: absolute;
   inset: 0;
diff --git a/apps/web/src/main.tsx b/apps/web/src/main.tsx
index d5b1044..86c0383 100644
--- a/apps/web/src/main.tsx
+++ b/apps/web/src/main.tsx
@@ -16,6 +16,7 @@ import "./styles/pages/projects.css";
 import "./styles/pages/git-history.css";
 import "./styles/pages/ssh-keys.css";
 import "./styles/pages/settings.css";
+import "./styles/pages/terminal.css";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
 	<React.StrictMode>
diff --git a/apps/web/src/styles/pages/terminal.css b/apps/web/src/styles/pages/terminal.css
new file mode 100644
index 0000000..46f7e70
--- /dev/null
+++ b/apps/web/src/styles/pages/terminal.css
@@ -0,0 +1,14 @@
+.terminal-page {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	min-height: 0;
+}
+
+.terminal-page-header {
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	gap: var(--space-4);
+	padding-bottom: var(--space-4);
+}