3.5.8

Day tab labels

assets/js/components/DayTabs.js

@@ -133,8 +133,10 @@ export function DayTabs({
   // full config strip now live in the nav dropdown (ConfigPanel); here we
   // only need the derived main metric to compute the day-tab numbers and to
   // label the "what temps am I looking at" row below.
-  const { isHomeOrOffice, isVehicleProfile, mainConfigKey, mainField, secondaryField, mainLabel } =
-    deriveProfileMain(activeProfile, outdoorsVariant);
+  const {
+    isHomeOrOffice, isVehicleProfile, mainConfigKey, mainField, secondaryField, mainLabel,
+    mainMetricLabel, mainMetricDesc, secondaryMetricLabel, secondaryMetricDesc,
+  } = deriveProfileMain(activeProfile, outdoorsVariant);
 
   // Read-only label of the current main-config value, for the row above the
   // day tabs — makes it obvious at a glance which temperature basis (SunSoak
@@ -202,6 +204,15 @@ export function DayTabs({
           onClick=${() => scrollDayTabs(1)}
           aria-label="Scroll days right"
           type="button">›</button>
+      ${/* Fixed label column outside the scroller — names the two stacked
+            numbers in every tab, since which metrics they are changes with
+            the active profile. Bottom-aligned against the tabs' numeric
+            block (see .utci-day-legend-col in table.css). */''}
+      <div class="utci-day-legend-col">
+        <span class="utci-day-legend-main" title=${mainMetricDesc}>${mainMetricLabel}</span>
+        ${(isVehicleProfile || secondaryField) && html`
+          <span class="utci-day-legend-sec" title=${secondaryMetricDesc}>${secondaryMetricLabel}</span>`}
+      </div>
       <div class="utci-day-tabs" ref=${dayTabsRef}>
         ${days.map((d, i) => {
           const band   = confidenceBand(i);