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