fix: prevent terminal container from overflowing page on desktop

The desktop terminal page sometimes grew an outer scrollbar because the
terminal instance/wrapper/container chain lacked height constraints.
Without min/max-height enforcement, xterm.js's internal viewport could
expand its parent flex/grid track past the available space.

- Add overflow: hidden to .terminal-page.
- Add max-height: 100% and overflow: hidden to .terminal-instance.
- Add max-height: 100% to .terminal-wrapper.
- Add min-height: 0 to .terminal-container.
- Constrain .xterm-viewport to max-height/width 100% so it fills but
  never exceeds its container.

Quality gates: npm run typecheck, npm run lint, npm test -- --run (87 passed).

Refs: openspec/changes/fix-terminal-container-overflow

apps/web/src/.pi-map.index.md

@@ -2,7 +2,7 @@
 dir: apps/web/src
 
 ## role
-Entry point and core infrastructure for a React web application handling routing, authentication, and type definitions.
+Provides the core web application entry point, routing infrastructure, and shared domain type definitions for a React-based frontend.
 ## parent
 index: apps/web/.pi-map.index.md
 map: apps/web/.pi-map.md

apps/web/src/.pi-map.md

@@ -4,13 +4,13 @@ dir: apps/web/src
 index: apps/web/src/.pi-map.index.md
 
 ## role
-Entry point and core infrastructure for a React web application handling routing, authentication, and type definitions.
+Provides the core web application entry point, routing infrastructure, and shared domain type definitions for a React-based frontend.
 ## files
 - main.tsx | Bootstraps a React application with routing, authentication, and session management providers. | dep: react, react-dom/client, react-router-dom, ./router, ./state/auth, ./state/sessions, ./styles/tokens.css, ./styles/global.css, ./styles/utilities.css, ./styles/syntax-highlight.css, ./styles/pages/git-history.css, ./styles/pages/projects.css, ./styles/pages/sessions.css, ./styles/pages/ssh-keys.css, ./styles/pages/workspace-detail.css, ./styles/pages/workspaces.css, react-dom
 - router.tsx | Defines the React Router configuration for a web application with protected routes, nested layouts, and redirects. | exp: AppRouter | dep: react-router-dom, ./components/app-shell, ./components/protected-route, ./pages/DashboardPage, ./pages/PlaceholderPage, ./pages/ProfilePage, ./pages/ProjectsPage, ./pages/GitRepositoriesPage, ./pages/GitHistoryPage, ./pages/ProjectSettingsPage, ./pages/SettingsPage, ./pages/TerminalPage, ./pages/ToolWorkshopPage, ./pages/SshKeysPage, ./pages/ConfigProfilesPage, ./pages/SessionsPage, ./pages/WorkspacesPage, ./pages/WorkspaceDetailPage
 - types.ts | Defines TypeScript type definitions for user sessions, projects, repositories, and workspaces in an application. | exp: SessionUser, SessionPayload, Project, WorkspaceSummary, RepositorySummary, ProjectWithRepos
 ## arch
-Modular React SPA with React Router v6 (nested routes, protected routes, layout nesting), provider-based context pattern for auth/session management, and centralized TypeScript type definitions.
+Modular React SPA with provider-based dependency injection, declarative routing with nested layouts and route guards, and centralized TypeScript type definitions.
 ## tags
 pages, styles, css, router, react, session, dom, project
 ## symbols

apps/web/src/styles/.pi-map.index.md

@@ -2,7 +2,7 @@
 dir: apps/web/src/styles
 
 ## role
-Provides the complete visual design system and styling infrastructure for the web application, including tokens, utilities, global layouts, and component-specific styles.
+Provides the complete visual design system and styling foundation for the web application, including themes, tokens, utilities, and component-specific styles.
 ## parent
 index: apps/web/src/.pi-map.index.md
 map: apps/web/src/.pi-map.md

apps/web/src/styles/.pi-map.md

@@ -4,16 +4,16 @@ dir: apps/web/src/styles
 index: apps/web/src/styles/.pi-map.index.md
 
 ## role
-Provides the complete visual design system and styling infrastructure for the web application, including tokens, utilities, global layouts, and component-specific styles.
+Provides the complete visual design system and styling foundation for the web application, including themes, tokens, utilities, and component-specific styles.
 ## files
 - global.css | Defines global CSS styles for a web application shell layout, navigation, cards, forms, dialogs, settings pages, and responsive design patterns. | dep: CSS custom properties (CSS variables: --border, --panel, --brand, --muted, --ink, --bg, --danger, --success, --warning, --font-size-xs, --font-size-sm, --space-2, --space-3, --space-4, --space-5)
 - syntax-highlight.css | Stylesheet for a syntax highlighting component with toolbar, line numbers, code display, and Prism.js theme integration | dep: Prism.js
 - tokens.css | Defines a comprehensive CSS design token system with light/dark themes, spacing scales, breakpoints, and fluid typography for a web application.
-- utilities.css | Provides a comprehensive responsive CSS utility system with layout primitives, mobile-first adaptations, terminal-specific styling, and component patterns for a web application | dep: CSS custom properties (variables), xterm.js (terminal integration)
+- utilities.css | Provides responsive CSS utility classes and component styles for a web application including layout, terminal, session navigation, and mobile-specific adaptations. | dep: CSS custom properties (--space-*, --border, --bg, --muted, --brand, --danger, --danger-light, --success, --text, --text-xs, --text-sm), xterm.js (terminal library)
 ## arch
-CSS custom properties-based design token architecture with theme-aware variables (light/dark), mobile-first responsive utilities, and modular separation of concerns across tokens, utilities, global styles, and component-specific stylesheets.
+Token-driven CSS architecture using CSS custom properties for light/dark theming, utility-first responsive patterns, and modular separation of concerns across global base styles, design tokens, syntax highlighting, and adaptive utilities.
 ## tags
-space, global, css, web, application, syntax, defines, layout
+space, global, css, web, application, danger, syntax, text
 ## symbols
 -
 ## workflows

apps/web/src/styles/utilities.css

@@ -439,6 +439,7 @@ a.nav-item,
 	min-height: 0;
 	padding: var(--space-4);
 	gap: var(--space-4);
+	overflow: hidden;
 }
 
 .terminal-page-header {
@@ -457,6 +458,7 @@ a.nav-item,
 	grid-template-rows: auto 1fr;
 	flex: 1;
 	min-height: 0;
+	max-height: 100%;
 	border: 1px solid var(--border);
 	border-radius: 10px;
 	overflow: hidden;
@@ -549,6 +551,7 @@ a.nav-item,
 	position: relative;
 	width: 100%;
 	height: 100%;
+	min-height: 0;
 	padding: 0;
 	overflow: hidden;
 }
@@ -557,6 +560,8 @@ a.nav-item,
 .terminal-container .xterm-viewport {
 	touch-action: auto;
 	overscroll-behavior: auto;
+	max-height: 100% !important;
+	width: 100% !important;
 }
 
 /* xterm.js manages its own positioning and sizing */
@@ -767,7 +772,9 @@ a.nav-item,
 .terminal-instance {
 	flex: 1;
 	min-height: 0;
+	max-height: 100%;
 	display: none;
+	overflow: hidden;
 }
 
 .terminal-instance.active {