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 {

assets/css/table.css

@@ -210,9 +210,9 @@
 }
 
 .profile-btn {
-  width: 80px;
-  height: 80px;
-  flex: none;            /* never shrink below 80px — the row scrolls instead */
+  width: 100px;
+  height: 100px;
+  flex: none;            /* never shrink below 100px — the row scrolls instead */
   padding: 0;
   position: relative;
   display: inline-flex;
@@ -958,8 +958,8 @@
 
   /* Slightly smaller cards on mobile */
   .profile-btn {
-    width: 68px;
-    height: 68px;
+    width: 80px;
+    height: 80px;
     flex: none;
   }
 

assets/css/ui.css

@@ -447,12 +447,12 @@
    Used for the Places / Activities / Work triggers in the profile bar.  */
 
 .profile-scroll .cs-wrap {
-  height: 80px;
+  height: 100px;
 }
 
 .cs-btn.profile-card {
-  width: 80px;
-  height: 80px;
+  width: 100px;
+  height: 100px;
   padding: 0;
   position: relative;
   flex-direction: column;
@@ -490,21 +490,32 @@
   left: 0;
   right: 0;
   height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  /* Block (not flex) so text-overflow:ellipsis cuts cleanly on the trailing
+     edge — e.g. "Forest / Wo…" — instead of a flex item clipping both sides.
+     line-height vertically centres the single line; text-align centres short
+     labels while long ones ellipsise against the right pad that clears the
+     arrow. */
+  display: block;
+  line-height: 24px;
+  text-align: center;
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   background: rgba(30,18,8,0.52);
   color: #fff;
-  padding: 0 14px 0 4px;
+  padding: 0 17px 0 6px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+/* When the label overflows it must read left-to-right so the ellipsis lands on
+   the end ("Forest / Wo…"); centred overflow would clip the start too. */
+.cs-btn.profile-card.on .cs-btn-label {
+  text-align: left;
+}
+
 .cs-btn.profile-card .cs-arrow {
   position: absolute;
   right: 6px;
@@ -540,11 +551,11 @@
 
 @media (max-width: 640px) {
   .profile-scroll .cs-wrap {
-    height: 68px;
+    height: 80px;
   }
   .cs-btn.profile-card {
-    width: 68px;
-    height: 68px;
+    width: 80px;
+    height: 80px;
   }
   .cs-btn.profile-card .cs-arrow {
     bottom: 7px;
@@ -555,6 +566,7 @@
   }
   .cs-btn.profile-card .cs-btn-label {
     height: 20px;
+    line-height: 20px;
     font-size: 9px;
   }
 }