2.2.5

Fix UI issues

assets/css/header.css

@@ -395,8 +395,14 @@
   text-transform: uppercase;
 }
 
-/* ── Mobile header layout ────────────────────────────────────────────── */
-@media (max-width: 640px) {
+/* ── Stacked header layout (mobile + tablet) ─────────────────────────────
+   The desktop 3-column grid (left | dial | why-panel) needs ~960px of
+   viewport to fit: the location/search box is 300px, the "Why it feels like"
+   panel ~300px, plus the 220px dial and gaps. Below that the rigid columns
+   can't shrink and the why-panel overflows off the right edge, so we stack
+   everything into one centred column — matching where the glance rail also
+   drops below the table. */
+@media (max-width: 960px) {
   .utci-header {
     grid-template-columns: 1fr;   /* single column — stack title, dial, search */
     grid-template-areas: none;    /* flow in DOM order: left, dial, selector, why */
@@ -414,7 +420,7 @@
   }
 
   .header-right {
-    align-items: flex-start;      /* left-align location on mobile */
+    align-items: center;          /* centre the "Why it feels like" panel under the dial */
   }
 
   .utci-title {