smaller font for header, announcements full size always

src/components/AppWindow.js

@@ -31,6 +31,7 @@ class AppWindow extends Shadow {
                         break;
                 }
         })
+        .height(100, pct)
         .overflowY("scroll")
         .onNavigate(() => {
             this.rerender()

src/components/TopBar.js

@@ -28,20 +28,24 @@ class TopBar extends Shadow {
                     .borderRadius("50", pct)
             }
 
-            p(global.currentApp())
+            p()
+                .state("app", function () {
+                    this.innerText = global.currentApp() === "Dashboard" ? "Announcements" : global.currentApp()
+                })
                 .color("var(--headertext)")
                 .textAlign("center")
                 .fontFamily("Arial")
-                .fontSize("3xl")
+                .fontSize("clamp(0.8rem, 40cqw, 7cqw)")
                 .fontWeight("bold")
         })
+        .containerType("inline-size")
         .paddingLeft(1, em)
         .paddingBottom(1.5, em)
         .verticalAlign("center")
         .gap(0.5, em)
         .marginTop(4, em)
         .onNavigate(() => {
-            this.$("p").innerText = global.currentApp()
+            this.$("p").attr({app: global.currentApp()})
         })
     }
 }