diff --git a/app/static/css/style.css b/app/static/css/style.css
index 048552f..78e9c4d 100644
--- a/app/static/css/style.css
+++ b/app/static/css/style.css
@@ -59,19 +59,21 @@ header {
 .logo {
     display: inline-flex;
     align-items: center;
+    max-width: 180px;
+    overflow: hidden;
 }
 
 .brand-logo {
     display: block;
-    width: min(220px, 42vw) !important;
-    max-width: 100%;
-    height: auto !important;
-    max-height: 58px !important;
+    width: 180px !important;
+    max-width: 180px !important;
+    height: 48px !important;
+    max-height: 48px !important;
     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; }
+.page-header .brand-logo { width: 180px !important; max-width: 180px !important; height: 48px !important; max-height: 48px !important; }
 
 .logo span {
     color: var(--accent);
@@ -463,8 +465,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; }
+    .logo { max-width: 150px; }
+    .brand-logo, .page-header .brand-logo { width: 150px !important; max-width: 150px !important; height: 40px !important; max-height: 40px !important; }
     .page-title { padding-left: 11px; }
     .button { min-height: 42px; }
 }