3.5.8

Day tab labels

assets/css/table.css

@@ -11,9 +11,13 @@
 /* Wrapper that hosts the scrollable strip, edge fades, and chevrons. */
 .utci-day-tabs-wrap {
   position: relative;
+  display: flex;
   margin-top: 12px;
   margin-bottom: 15px;
   border: 1px solid #c9b08a;
+  /* Width of the fixed metric-label column; the left fade and left chevron
+     both offset by this so they never sit on top of it. */
+  --day-legend-w: 72px;
 }
 
 /* Edge fade gradients — only show when there's content to scroll to. */
@@ -30,7 +34,7 @@
   transition: opacity 0.2s;
 }
 .utci-day-tabs-wrap::before {
-  left: 0;
+  left: var(--day-legend-w);
   background: linear-gradient(to right, #f5edd6 0%, rgba(245,237,214,0) 100%);
 }
 .utci-day-tabs-wrap::after {
@@ -66,15 +70,67 @@
 .utci-day-scroll:hover {
   background: #fef3dc;
 }
-.utci-day-scroll.left  { left: -2px; }
+.utci-day-scroll.left  { left: calc(var(--day-legend-w) - 2px); }
 .utci-day-scroll.right { right: -2px; }
 .utci-day-scroll.hidden {
   opacity: 0;
   pointer-events: none;
 }
 
+/* Fixed first column naming the two numbers stacked in each tab — which
+   metrics those are changes with the active profile (SunSoak/Shade, Indoors/
+   Managed, Fur/Shade, Vehicle/Windows Open), so without this the numbers are
+   unlabelled. Sits outside .utci-day-tabs so it never scrolls away.
+
+   Alignment: .utci-day-tabs stretches every tab to equal height and the
+   numeric block is the last thing in each one, so bottom-aligning this column
+   with matching padding lands the labels on the same lines as the values —
+   no need to replicate the day-name / date / icon stack above them. */
+.utci-day-legend-col {
+  flex: 0 0 var(--day-legend-w);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: flex-end;
+  gap: 1px;
+  /* Bottom 11px = the tab's 10px padding + its 1px bottom border. */
+  padding: 10px 6px 11px;
+  background: #fdf8ee;
+  text-align: right;
+  font-family: Manrope, sans-serif;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  overflow-wrap: break-word;
+}
+
+/* Each label matches the weight and colour family of the value beside it, so
+   the big/small pairing reads without a legend. Heights match the value line
+   boxes: 14px x 1.1 and 11px x 1.1 (see the numeric block in DayTabs.js). */
+.utci-day-legend-main {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  min-height: 15px;
+  font-size: 9px;
+  font-weight: 800;
+  line-height: 1.1;
+  color: #6b4f2a;
+}
+.utci-day-legend-sec {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  min-height: 12px;
+  font-size: 8px;
+  font-weight: 600;
+  line-height: 1.1;
+  color: #9a7d5a;
+}
+
 .utci-day-tabs {
   display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
   overflow-x: auto;
   scroll-behavior: smooth;
   scrollbar-width: none;        /* Firefox */
@@ -1039,6 +1095,13 @@
   .utci-day-date {
     font-size: 12px;
   }
+
+  /* Narrow the metric-label column too, so it costs as little tab width as
+     possible on phones. */
+  .utci-day-tabs-wrap { --day-legend-w: 56px; }
+  .utci-day-legend-col { padding: 10px 4px 11px; letter-spacing: 0.04em; }
+  .utci-day-legend-main { font-size: 8px; }
+  .utci-day-legend-sec  { font-size: 7px; }
 }
 
 /* The shifted track inside the sticky header — JS sets transform:translate3d