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)

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;

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>

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);
+}