From 35f0fe3654e3da2cacf401787f1f9ece128abfcd Mon Sep 17 00:00:00 2001
From: metacryst <samrussell99@gmail.com>
Date: Sat, 21 Mar 2026 06:54:53 -0500
Subject: [PATCH] smaller font for header, announcements full size always

---
 readme.md                   |  3 +++
 src/components/AppWindow.js |  1 +
 src/components/TopBar.js    | 10 +++++++---
 src/public/_/code/quill.js  | 14 ++++++++++----
 4 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/readme.md b/readme.md
index e043964..0d614ad 100644
--- a/readme.md
+++ b/readme.md
@@ -30,6 +30,9 @@ npx cap open ios
 Run this command to rebuild for iOS
 npm run build && npx cap copy ios
 
+If getting black screen:
+npx cap sync iOS
+
 ### iOS: Dev Frontend and Dev Backend (localhost)
 This option should be at the top level of capacitor.config.json
 "server": {
diff --git a/src/components/AppWindow.js b/src/components/AppWindow.js
index 3117196..6f3a680 100644
--- a/src/components/AppWindow.js
+++ b/src/components/AppWindow.js
@@ -31,6 +31,7 @@ class AppWindow extends Shadow {
                         break;
                 }
         })
+        .height(100, pct)
         .overflowY("scroll")
         .onNavigate(() => {
             this.rerender()
diff --git a/src/components/TopBar.js b/src/components/TopBar.js
index 27699e8..32fa7e0 100644
--- a/src/components/TopBar.js
+++ b/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()})
         })
     }
 }
diff --git a/src/public/_/code/quill.js b/src/public/_/code/quill.js
index 756916e..f9622b6 100644
--- a/src/public/_/code/quill.js
+++ b/src/public/_/code/quill.js
@@ -1,7 +1,7 @@
 /*
     Sam Russell
     Captured Sun
-    2.21.26 - Making state() be called on initial definition
+    2.21.26 - Making state() be called on initial definition, fixing fontSize so it works with clamp(), other strings
     2.20.26 - Adding state()
     2.19.26 - Adding dynamicText()
     2.16.26 - Adding event objects to the onTouch callbacks
@@ -472,7 +472,7 @@ HTMLElement.prototype.setUpState = function(styleFunc, cb) {
 }
 
 function StyleFunction(func) {
-    let styleFunction = function(value, unit = "px") {
+    let styleFunction = function(value, unit) {
         if(typeof value === 'function') {
             this.setUpState(styleFunction, value)
             return this
@@ -528,7 +528,7 @@ HTMLElement.prototype.borderHorizontal = StyleFunction(function(value) {
     return this
 })
 
-HTMLElement.prototype.fontSize = StyleFunction(function(value, unit = "px") {
+HTMLElement.prototype.fontSize = StyleFunction(function(value, unit) {
     
     switch(value) {
         case "6xl": 
@@ -570,7 +570,13 @@ HTMLElement.prototype.fontSize = StyleFunction(function(value, unit = "px") {
         default:
             break;
     }
-    this.style.fontSize = value + unit
+
+    if(unit) {
+        this.style.fontSize = value + unit
+    } else {
+        this.style.fontSize = value
+    }
+
     return this
 })