From d3ab367f6c0d8e7d67583a0ca5a718b29b323fe2 Mon Sep 17 00:00:00 2001
From: Thomas Cravey <tjcravey@MacBookPro.localdomain>
Date: Sun, 17 Aug 2025 14:12:33 -0500
Subject: [PATCH] fix(webui): eliminate double scroll; lock footer; opaque
 header/footer; use CSS grid body layout and height:100% for content

---
 internal/httpapi/static/app.css | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/internal/httpapi/static/app.css b/internal/httpapi/static/app.css
index 0f9977f..775654f 100644
--- a/internal/httpapi/static/app.css
+++ b/internal/httpapi/static/app.css
@@ -1,16 +1,17 @@
-body { padding: 0; }
+html, body { height: 100%; }
+body { padding: 0; display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; overflow: hidden; }
 header.nav { position: sticky; top: 0; z-index: 10; padding: .6rem 1rem; border-bottom: 1px solid var(--muted-border-color); display: flex; justify-content: space-between; align-items: center; background: var(--background-color); }
 header.nav a.brand { text-decoration: none; font-weight: 600; }
 /* Dashboard-only grid layout */
-.dash { display: grid; grid-template-columns: 220px 1fr; gap: 0; min-height: calc(100vh - 3rem); }
+.dash { display: grid; grid-template-columns: 220px 1fr; gap: 0; height: 100%; min-height: 0; }
 .dash aside.sidebar { border-right: 1px solid var(--muted-border-color); padding: .75rem; overflow-y: auto; }
 .dash aside.sidebar a { display:block; padding:.25rem .5rem; border-radius:.25rem; text-decoration:none; }
 .dash aside.sidebar a.active { background: var(--muted-color); color: var(--contrast); }
-.dash section.chat { padding: .75rem 1rem; display:flex; flex-direction: column; height: calc(100vh - 3.5rem); }
-#tail { flex: 1; overflow: auto; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; height: calc(100vh - 4.5rem); }
+.dash section.chat { padding: .75rem 1rem; display:flex; flex-direction: column; height: 100%; min-height: 0; }
+#tail { flex: 1; overflow: auto; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; height: 100%; }
 .ts { opacity: .66; }
 .msg { margin-bottom: .25rem; }
-footer { text-align: center; font-size: .85rem; padding: .5rem 0; opacity: .7; }
+footer { text-align: center; font-size: .85rem; padding: .5rem 0; opacity: .7; background: var(--background-color); }
 @media (max-width: 900px) { .dash { grid-template-columns: 1fr; } .dash aside.sidebar { display:none; } }
 /* Summarizer output wrapping */
 #out { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }