fix(web): dark background on html/body, full-page session, sticky detail header

- Set html/body/#root background to #14110e (no more white on scroll)
- Remove AppShell from session replay and live session routes (full page)
- Make installation detail header/completion bar sticky with scrollable table

Author: mariuspruvot

apps/web/src/app.tsx

@@ -29,10 +29,10 @@ export default function App() {
         {/* Protected routes — wrapped in AppShell */}
         <Route path="/installations" element={<ProtectedRoute><AppShell><InstallationList /></AppShell></ProtectedRoute>} />
         <Route path="/installations/:installationId" element={<ProtectedRoute><AppShell><InstallationDetail /></AppShell></ProtectedRoute>} />
-        <Route path="/installations/:installationId/sessions/:sessionId" element={<ProtectedRoute><AppShell><SessionReplay /></AppShell></ProtectedRoute>} />
+        <Route path="/installations/:installationId/sessions/:sessionId" element={<ProtectedRoute><SessionReplay /></ProtectedRoute>} />
         <Route path="/installations/:installationId/setup" element={<ProtectedRoute><AppShell><SetupView /></AppShell></ProtectedRoute>} />
         <Route path="/installations/:installationId/settings" element={<ProtectedRoute><AppShell><SettingsView /></AppShell></ProtectedRoute>} />
-        <Route path="/session/:installationId/*" element={<ProtectedRoute><AppShell><SessionView /></AppShell></ProtectedRoute>} />
+        <Route path="/session/:installationId/*" element={<ProtectedRoute><SessionView /></ProtectedRoute>} />
       </Routes>
     </BrowserRouter>
     </ErrorBoundary>

apps/web/src/features/dashboard/InstallationDetail.tsx

@@ -58,9 +58,9 @@ export default function InstallationDetail() {
   const completionPct = total > 0 ? Math.round((completed / Math.max(sessions.length, 1)) * 100) : 0
 
   return (
-    <div>
-      {/* Header + filters */}
-      <div className="flex justify-between items-end mb-5">
+    <div className="flex flex-col h-[calc(100vh-56px)]">
+      {/* Sticky header + filters */}
+      <div className="shrink-0 flex justify-between items-end mb-5">
         <div>
           <Overline className="mb-1.5">{'\u25b8'} SESSIONS {'\u00b7'} {total} TOTAL</Overline>
           <h1 className="font-mono text-2xl font-bold tracking-[-0.02em]">Session History</h1>
@@ -85,7 +85,7 @@ export default function InstallationDetail() {
 
       {/* Completion bar */}
       {!loading && sessions.length > 0 && (
-        <div className="flex items-center gap-5 px-4 py-3.5 bg-card border border-rule rounded-card mb-5">
+        <div className="shrink-0 flex items-center gap-5 px-4 py-3.5 bg-card border border-rule rounded-card mb-5">
           <div className="flex items-baseline gap-1.5">
             <span className="font-mono text-[22px] font-bold">{completionPct}%</span>
             <span className="font-mono text-[10px] text-dim tracking-[0.12em] uppercase">completion</span>
@@ -103,6 +103,9 @@ export default function InstallationDetail() {
         </div>
       )}
 
+      {/* Scrollable content */}
+      <div className="flex-1 min-h-0 overflow-y-auto">
+
       {/* Error */}
       {error && (
         <div className="mb-4 px-4 py-3 bg-danger/8 border border-danger/20 rounded-card text-danger text-sm">
@@ -205,6 +208,8 @@ export default function InstallationDetail() {
           )}
         </>
       )}
+
+      </div>{/* end scrollable */}
     </div>
   )
 }

apps/web/src/index.css

@@ -1,5 +1,11 @@
 @import "tailwindcss";
 
+html, body, #root {
+  background: #14110e;
+  color: #f2ede4;
+  min-height: 100vh;
+}
+
 /* JetBrains Mono — primary monospace font */
 @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');