5.5

New big and small scope sunset and sunrise simulation
New calculations for the day tabs
Added missing icons to simple view
New record popups
Week ahead description popups
Camping profile
Tweak to some of the indoor tems

assets/js/hooks/useTableScroll.js

@@ -44,6 +44,8 @@ export function useTableScroll({
   // are a sticky header table over a horizontally scrolling body table.
   // It is a dependency purely so the widths re-sync on the flip.
   rotated = false,
+  // Row bucket size (1-4h). Changes the number of rows/columns, so widths must re-sync.
+  tableInterval = 1,
 }) {
   // --- SCROLL INDICATORS ---------------------------------------------
   const [tableCanScrollLeft,  setTableCanScrollLeft]  = useState(false);
@@ -167,6 +169,10 @@ export function useTableScroll({
       bodyCells.forEach(c => { c.style.width = ''; c.style.minWidth = ''; c.style.maxWidth = ''; });
       headTable.style.width = 'max-content';
       bodyTable.style.width = 'max-content';
+      // Drop the CSS min-width:100% while measuring, or auto layout stretches the
+      // columns to fill the container and the "natural" widths come out inflated.
+      headTable.style.minWidth = '0';
+      bodyTable.style.minWidth = '0';
       headTable.style.tableLayout = 'auto';
       bodyTable.style.tableLayout = 'auto';
 
@@ -176,7 +182,15 @@ export function useTableScroll({
       let naturalTotal = 0;
       for (let i = 0; i < n; i++) {
         const headW = headCells[i].getBoundingClientRect().width;
-        const bodyW = bodyCells[i].getBoundingClientRect().width;
+        let bodyW = bodyCells[i].getBoundingClientRect().width;
+        // Rotated: the first body row is an empty group-label row, so take
+        // the widest cell in this column across every body row instead.
+        if (rotated) {
+          bodyTable.querySelectorAll('tbody tr').forEach(tr => {
+            const c = tr.children[i];
+            if (c) bodyW = Math.max(bodyW, c.getBoundingClientRect().width);
+          });
+        }
         const w = Math.max(Math.ceil(headW), Math.ceil(bodyW));
         naturalW[i] = w;
         naturalTotal += w;
@@ -186,14 +200,40 @@ export function useTableScroll({
       const containerW = bodyScroll.clientWidth;
       const finalW = new Array(n);
       let totalWidth;
-      if (naturalTotal > 0 && naturalTotal < containerW) {
+      // Rotated: pinned label column keeps its natural width and the hour
+      // columns are sized EQUALLY to exactly fill the scroller - both
+      // spreading out when there are few and shrinking (down to the 92px
+      // cell minimum) so they never run off the right edge. Only when even
+      // that floor doesn't fit does it fall through to natural widths + scroll.
+      const eqW = rotated && n > 1 ? Math.floor((containerW - naturalW[0]) / (n - 1)) : 0;
+      if (rotated && n > 1 && eqW >= 92) {
+        let running = naturalW[0];
+        finalW[0] = naturalW[0];
+        for (let i = 1; i < n - 1; i++) { finalW[i] = eqW; running += eqW; }
+        finalW[n - 1] = containerW - running;   // absorb rounding
+        totalWidth = containerW;
+      } else if (naturalTotal > 0 && naturalTotal < containerW) {
         // Spare space - distribute proportionally across columns so they
         // fan out to fill the scroller (no awkward right-hand gap).
         const scale = containerW / naturalTotal;
         let running = 0;
-        for (let i = 0; i < n - 1; i++) {
-          finalW[i] = Math.floor(naturalW[i] * scale);
-          running += finalW[i];
+        if (rotated && n > 1) {
+          // Rotated: keep the pinned label column at its natural width and
+          // share the spare space EQUALLY across the hour columns, so 2h/3h/4h
+          // spread evenly instead of scaling each column by its own width.
+          const spare = containerW - naturalTotal;
+          const share = Math.floor(spare / (n - 1));
+          finalW[0] = naturalW[0];
+          running = finalW[0];
+          for (let i = 1; i < n - 1; i++) {
+            finalW[i] = naturalW[i] + share;
+            running += finalW[i];
+          }
+        } else {
+          for (let i = 0; i < n - 1; i++) {
+            finalW[i] = Math.floor(naturalW[i] * scale);
+            running += finalW[i];
+          }
         }
         // Absorb sub-pixel rounding into the last column so the total
         // exactly matches the container width.
@@ -251,7 +291,7 @@ export function useTableScroll({
       if (ro) ro.disconnect();
       window.removeEventListener('resize', sync);
     };
-  }, [forecast, visibleCols, selectedDay, skinType, vehicleType, indoorMode, indoorManaged, showDecimals, showUnits, rotated]);
+  }, [forecast, visibleCols, selectedDay, skinType, vehicleType, indoorMode, indoorManaged, showDecimals, showUnits, rotated, tableInterval]);
 
   return {
     tableCanScrollLeft,