Improve mobile header layout

frontend/app/globals.css

@@ -1399,19 +1399,86 @@ button span {
 }
 
 @media (max-width: 720px) {
+  .page {
+    padding: 28px 18px 60px;
+    gap: 24px;
+  }
+
   .header {
     grid-template-columns: 1fr;
     grid-template-rows: auto auto auto;
     align-items: flex-start;
   }
 
+  .header-left {
+    width: 100%;
+  }
+
+  .brand-link {
+    width: 100%;
+    gap: 12px;
+  }
+
+  .brand-logo--header {
+    width: 64px;
+    height: 64px;
+  }
+
+  .brand {
+    font-size: 26px;
+  }
+
+  .tagline {
+    font-size: 13px;
+  }
+
   .header-right {
     grid-column: 1 / -1;
     justify-content: flex-start;
+    width: 100%;
+    flex-wrap: wrap;
+    gap: 10px;
   }
 
   .header-nav {
     justify-content: flex-start;
+    width: 100%;
+  }
+
+  .signed-in-menu {
+    width: 100%;
+  }
+
+  .signed-in {
+    width: 100%;
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .signed-in-dropdown {
+    position: static;
+    width: 100%;
+    margin-top: 8px;
+  }
+
+  .header-actions {
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 10px;
+  }
+
+  .header-actions a,
+  .header-actions .header-link {
+    font-size: 12px;
+    padding: 8px 10px;
+  }
+
+  .header-actions .header-cta--left {
+    grid-column: 1 / -1;
+    margin-right: 0;
   }
 
   .summary {
@@ -1451,6 +1518,12 @@ button span {
   }
 }
 
+@media (max-width: 480px) {
+  .header-actions {
+    grid-template-columns: 1fr;
+  }
+}
+
 /* Loading spinner */
 .loading-center {
   display: flex;