Scale MetalCircle logo for mobile headers

app/static/css/style.css

@@ -63,12 +63,15 @@ header {
 
 .brand-logo {
     display: block;
-    width: min(300px, 48vw);
+    width: min(220px, 42vw);
     height: auto;
-    max-height: 74px;
+    max-height: 58px;
     object-fit: contain;
 }
 
+/* The wordmark must remain compact in the page header, especially in the app webview. */
+.page-header .brand-logo { width: min(220px, 58vw); max-height: 58px; }
+
 .logo span {
     color: var(--accent);
 }
@@ -459,6 +462,8 @@ h1, .page-title h1 {
 .empty-state { background: rgba(16,16,16,.86); border-style: solid; }
 
 @media (max-width: 600px) {
+    .brand-logo { width: min(180px, 52vw); max-height: 50px; }
+    .page-header .brand-logo { width: min(190px, 62vw); max-height: 50px; }
     .page-title { padding-left: 11px; }
     .button { min-height: 42px; }
 }