2.7.3

Add thermals to 'Why' label
Fix profile tab spacing
Add arrows to profile sides scroller

assets/css/table.css

@@ -164,6 +164,7 @@
   margin-bottom: 0;
   scrollbar-width: none;
   -ms-overflow-style: none;
+  padding-left: 4px;        /* breathing room at left edge */
   padding-right: 4px;       /* breathing room at right edge */
 }
 .profile-scroll::-webkit-scrollbar { display: none; }
@@ -205,6 +206,25 @@
 .profile-scroll-wrap.fade-left::before  { opacity: 1; }
 .profile-scroll-wrap.fade-right::after  { opacity: 1; }
 
+.profile-scroll-chevron {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 3;
+  pointer-events: none;
+  color: #8a6a3a;
+  font-size: 18px;
+  line-height: 1;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  user-select: none;
+}
+.profile-scroll-chevron.left  { left:  4px; }
+.profile-scroll-chevron.right { right: 4px; }
+
+.profile-scroll-wrap.fade-left  .profile-scroll-chevron.left  { opacity: 1; }
+.profile-scroll-wrap.fade-right .profile-scroll-chevron.right { opacity: 1; }
+
 /* Vertical rule separating general-use profiles from technical ones */
 .profile-divider {
   display: inline-block;
@@ -1036,7 +1056,13 @@
   /* ── Profile bar — single scroll row on all screen sizes ───────────
      No wrapping needed; scroll strip handles layout. Dividers stay.   */
   .filter-profiles {
-    padding: 4px 10px 0;
+    padding: 4px 0 0;
+  }
+
+  .profile-tabs {
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
   }
 
   /* Slightly smaller cards on mobile */

assets/css/ui.css

@@ -1265,7 +1265,7 @@
   padding: 12px 16px;
 }
 
-/* Section heading - "WHY IT FEELS LIKE THIS" */
+/* Section heading - "WHY IT FEELS" */
 .insight-panel-title {
   font-family: Manrope, sans-serif;
   font-size: 10px;
@@ -1274,7 +1274,21 @@
   letter-spacing: 0.1em;
   color: #b09870;
   margin-bottom: 10px;
-  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+}
+
+.insight-thermal-cat {
+  display: inline-block;
+  padding: 2px 7px;
+  border-radius: 3px;
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  line-height: 1.5;
 }
 
 /* Each factor row */

assets/js/app.js

@@ -458,7 +458,10 @@ export function UTCIForecast() {
                     onChange=${(v) => setUtciEnv(v)}
                   />
                 </div>
-                <div class="insight-panel-title">Why it feels like this</div>
+                <div class="insight-panel-title">
+                  Why It Feels
+                  ${currentCat && html`<span class="insight-thermal-cat" style=${{ background: currentCat.bg, color: currentCat.fg }}>${currentCat.label}</span>`}
+                </div>
                 ${[
                   { label: 'Sun and sky',    icon: '☀',  value: whyFeelsLike.sunAndSky },
                   { label: 'Wind',           icon: '🌬',  value: whyFeelsLike.wind },

assets/js/components/DayTabs.js

@@ -176,6 +176,8 @@ export function DayTabs({
           `)}
         </div>
         <div class="profile-scroll-wrap" ref=${profileWrapRef}>
+          <span class="profile-scroll-chevron left" aria-hidden="true">‹</span>
+          <span class="profile-scroll-chevron right" aria-hidden="true">›</span>
         <div class="profile-scroll" ref=${profileScrollRef}>
 
           ${activeTab === 'common' && profileButtonOrder.map((key) => {