fix(panel): mobile header layout and compact location selector

Prevent panel header widgets from clipping on small screens by allowing wrapping, tightening padding/logo size, and using a single-line compact location selector.

Made-with: Cursor

app/panel/panel.css

@@ -370,3 +370,30 @@
   }
 }
 
+@media (max-width: 520px) {
+  /* Panel header: keep logo + widgets readable on very small screens */
+  .maf-panel .landing-header__inner {
+    align-items: flex-start;
+    min-height: unset;
+    padding: 8px 10px 8px 44px;
+    gap: 0.45rem;
+  }
+
+  .maf-panel .landing-header__logoWrap {
+    width: 112px;
+    height: 28px;
+  }
+
+  .maf-panel .landing-header__right {
+    align-items: flex-start;
+  }
+
+  /* Allow wrapping instead of clipping/overflow */
+  .maf-panel .landing-header__panelRight {
+    flex-wrap: wrap;
+    row-gap: 6px;
+    justify-content: flex-end;
+    max-width: min(100%, calc(100vw - 44px));
+  }
+}
+

components/widgets/LocationSelector/location-selector.css

@@ -70,6 +70,29 @@
   max-width: 100%;
 }
 
+@media (max-width: 520px) {
+  .maf-location__trigger {
+    height: 36px;
+    padding: 6px 10px;
+    gap: 8px;
+    max-width: min(260px, 56vw);
+  }
+
+  .maf-location__icon {
+    width: 26px;
+    height: 26px;
+  }
+
+  /* Single-line compact header control */
+  .maf-location__label {
+    display: none;
+  }
+
+  .maf-location__value {
+    font-size: 0.86rem;
+  }
+}
+
 .maf-location__chev {
   opacity: 0.8;
   flex: 0 0 auto;