From 7022b63e9ee8832f51c8fb0ba3db389d1e310aef Mon Sep 17 00:00:00 2001
From: Keith Smith <keithsmith@darksingularity.org>
Date: Mon, 17 Aug 2026 13:53:47 -0600
Subject: [PATCH] Fix UpdateBanner pushing the composer off the bottom of the
 screen

Every top-level page independently hardcoded a full-viewport height
(.chat-shell: 100vh, .admin-page: 100%, .login-screen family: min-height
100vh), assuming it alone owned the whole viewport. UpdateBanner renders
globally above all of them (App.tsx), so its height just stacked on top
instead of the page shrinking to make room -- on ChatShellPage specifically
(overflow: hidden), that clipped the bottom of the screen and hid the
composer behind the visible edge.

Made #root a flex column shared by the banner and whichever page is
routed, with each page now using flex: 1; min-height: 0 to fill whatever
space is actually left instead of assuming the full viewport.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 frontend/src/pages/AdminPage.css     |  7 ++++++-
 frontend/src/pages/ChatShellPage.css |  6 +++++-
 frontend/src/pages/LoginPage.css     |  8 +++++++-
 frontend/src/styles/tokens.css       | 14 ++++++++++++++
 4 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/AdminPage.css b/frontend/src/pages/AdminPage.css
index d76abc6..e1625c4 100644
--- a/frontend/src/pages/AdminPage.css
+++ b/frontend/src/pages/AdminPage.css
@@ -1,5 +1,10 @@
 .admin-page {
-  height: 100%;
+  /* Fills whatever's left in #root's flex column after UpdateBanner --
+     see tokens.css. height:100% resolved to the full viewport regardless
+     of the banner, causing the same off-screen-content bug ChatShellPage
+     had. */
+  flex: 1;
+  min-height: 0;
   display: flex;
   flex-direction: column;
   background: var(--ds-void);
diff --git a/frontend/src/pages/ChatShellPage.css b/frontend/src/pages/ChatShellPage.css
index ff19006..7f666af 100644
--- a/frontend/src/pages/ChatShellPage.css
+++ b/frontend/src/pages/ChatShellPage.css
@@ -1,5 +1,9 @@
 .chat-shell {
-  height: 100vh;
+  /* Fills whatever's left in #root's flex column after UpdateBanner --
+     see tokens.css. Not height:100vh: that ignored the banner entirely and
+     pushed the composer off the bottom of the screen whenever it showed. */
+  flex: 1;
+  min-height: 0;
   width: 100%;
   display: flex;
   flex-direction: column;
diff --git a/frontend/src/pages/LoginPage.css b/frontend/src/pages/LoginPage.css
index 00e1485..56c124c 100644
--- a/frontend/src/pages/LoginPage.css
+++ b/frontend/src/pages/LoginPage.css
@@ -1,5 +1,11 @@
 .login-screen {
-  min-height: 100vh;
+  /* Fills whatever's left in #root's flex column after UpdateBanner -- see
+     tokens.css. min-height:100vh ignored the banner and could grow the
+     whole page taller than the viewport instead of just filling what's
+     actually left, which also meant this stopped being vertically
+     centered on the space the user could see without scrolling. */
+  flex: 1;
+  min-height: 0;
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/frontend/src/styles/tokens.css b/frontend/src/styles/tokens.css
index 99073cc..3539adb 100644
--- a/frontend/src/styles/tokens.css
+++ b/frontend/src/styles/tokens.css
@@ -58,6 +58,20 @@ body,
   height: 100%;
 }
 
+/* #root's direct children are UpdateBanner (App.tsx renders it globally,
+   above every route, so it can prompt for a reload from any page) and
+   whichever page is currently routed. A flex column here, with the banner
+   as flex:none (already set on .update-banner) and each page's root
+   filling the rest via flex:1, lets the banner's height come out of the
+   page's available space instead of adding on top of a page that
+   separately hardcodes height:100vh/100% -- that additive stacking was
+   pushing chat's composer off the bottom of the screen whenever the
+   banner was showing. */
+#root {
+  display: flex;
+  flex-direction: column;
+}
+
 body {
   margin: 0;
   background: var(--ds-void);