3.5.9

Updated pet calcs to be more accurate
Fixed some layout issues
Updated profile popup

assets/css/table.css

@@ -383,6 +383,17 @@
   cursor: help;
 }
 
+/* Hidden reference copy of the Activities tab (see ConfigPanel.js) — stays
+   in normal flow so its natural width sets the dropdown's fixed size, but
+   is never seen or reachable. */
+.profile-scroll-sizer {
+  visibility: hidden;
+  height: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+.profile-scroll-sizer .profile-scroll { pointer-events: none; }
+
 /* Single scrollable row of profile cards */
 .profile-scroll {
   display: flex;
@@ -586,11 +597,9 @@
               visibility 0s linear 0s;
 }
 .profile-dropdown-body {
-  max-width: 900px;
-  margin: 0 auto;
   max-height: calc(100vh - 24px);
   overflow-y: auto;
-  padding: 12px 24px 16px;
+  padding: 16px;
 }
 .profile-dropdown-close {
   position: absolute;
@@ -618,6 +627,10 @@
     top: var(--profile-anchor-top, 0px);
     bottom: auto;
     max-height: calc(100vh - var(--profile-anchor-top, 0px) - 16px);
+    width: fit-content;
+    min-width: 380px;
+    max-width: min(880px, calc(100vw - 32px));
+    margin: 0 auto;
     border: 1.5px solid #c9b08a;
     border-radius: 12px;
     overflow: hidden; /* keeps the scrolling body inside the rounded corners */
@@ -663,7 +676,7 @@
   border: 2px solid #d4c0a0;
   border-radius: 9px;
   cursor: pointer;
-  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.04);
+  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.05), 0 2px 5px rgba(0,0,0,0.08);
   transition: filter 0.2s, border-color 0.2s, box-shadow 0.2s;
 }
 /* Remove alpha from the default fallback color and any potential inherited 
@@ -724,13 +737,18 @@
   letter-spacing: 0.04em;
   color: #9a6a1a;
   margin-left: 8px;
-  opacity: 0.7;
-  transition: opacity 0.2s, transform 0.2s, color 0.2s;
+  padding: 4px 10px;
+  background: rgba(200,146,42,0.12);
+  border: 1px solid rgba(200,146,42,0.35);
+  border-radius: 999px;
+  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
 }
 .active-profile-row:hover .active-profile-row-edit,
 .active-profile-row:focus-visible .active-profile-row-edit {
-  opacity: 1;
   color: #c8922a;
+  background: rgba(200,146,42,0.2);
+  border-color: #c8922a;
+  transform: translateY(-1px);
 }
 
 /* Border + text accent per thermal-model group, reusing the same colour
@@ -1108,9 +1126,12 @@
   z-index: 6; /* above sticky header (z-index 5) */
 }
 
-/* Left fade — warm cream fading to transparent rightward */
+/* Left fade — warm cream fading to transparent rightward.
+   Offset by the pinned Hour column's width (--hour-col-w, set by JS in
+   useTableScroll.js) so the fade sits over the first column that
+   actually scrolls, not over the Hour column itself. */
 .utci-table-wrap::before {
-  left: 0;
+  left: var(--hour-col-w, 0px);
   background: linear-gradient(to right, rgba(240,228,196,0.92) 0%, transparent 100%);
 }
 
@@ -1137,7 +1158,7 @@
   transition: opacity 0.2s ease;
   user-select: none;
 }
-.utci-table-wrap .utci-scroll-chevron.left  { left:  6px; }
+.utci-table-wrap .utci-scroll-chevron.left  { left: calc(var(--hour-col-w, 0px) + 6px); }
 .utci-table-wrap .utci-scroll-chevron.right { right: 6px; }
 
 .utci-table-wrap.scroll-fade-left  .utci-scroll-chevron.left  { opacity: 1; }
@@ -1255,6 +1276,34 @@
   text-align: left;
 }
 
+/* ── PINNED HOUR COLUMN ──────────────────────────────────────────────────
+   The Hour/time column stays put while the rest of the table scrolls
+   horizontally, mirroring the fixed label column on the day tabs strip.
+   The body scroller genuinely scrolls (overflow-x: auto) so a plain
+   sticky left:0 works there. The header track instead gets shifted by
+   JS via translate3d to mirror the body's scrollLeft - so its first
+   cells get an equal-and-opposite translate3d applied by JS (see
+   handleBodyScroll in useTableScroll.js) to cancel that shift and stay
+   visually pinned at the left edge. */
+.utci-table tbody td:first-child {
+  position: sticky;
+  left: 0;
+  z-index: 2;
+  background: #fffcf2;
+}
+.utci-table tbody tr:hover td:first-child {
+  background: #fef8ea;
+}
+.utci-table tbody tr.is-now td:first-child {
+  background: #fff8e4;
+}
+
+.utci-table thead th:first-child {
+  position: relative;
+  z-index: 3;
+  will-change: transform;
+}
+
 /* The "°C" / "m/s" etc. unit underneath each heading */
 .utci-table th .col-unit {
   display: block;
@@ -1965,6 +2014,7 @@
   letter-spacing: 0.07em;
   color: #7a5c2a;
   flex-shrink: 0;
+  margin-left: 0;
 }
 
 .forecast-view-toggle {
@@ -1980,7 +2030,7 @@
   font-size: 11px;
   font-weight: 700;
   line-height: 1;
-  padding: 6px 14px;
+  padding: 6px 8px;
   cursor: pointer;
   border: 1.5px solid #c9b08a;
   background: #f5edd6;
@@ -2021,7 +2071,7 @@
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: end;
-  padding: 0 14px;
+  padding: 0;
 }
 .fvt-toolbar-left {
   grid-column: 1;
@@ -2050,7 +2100,7 @@
     grid-template-columns: 1fr;
     justify-items: center;
     row-gap: 6px;
-    padding: 6px 10px 0;
+    padding: 6px 0 10px;
   }
   .fvt-toolbar-left {
     grid-column: 1;