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

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

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;

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;

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