4.9.3

Layout tweaks

assets/js/hooks/useAppState.js

@@ -637,6 +637,18 @@ export function useAppState() {
     return next;
   });
 
+  // Rotates the hourly table: off = hours down the side, on = hours along
+  // the top with the metrics down the side. Off by default — the tall
+  // layout is the one most people expect from a forecast table.
+  const [tableRotated, setTableRotated] = useState(() => {
+    try { return localStorage.getItem('sunscope_table_rotated') === '1'; } catch (e) { return false; }
+  });
+  const toggleTableRotated = () => setTableRotated(v => {
+    const next = !v;
+    try { localStorage.setItem('sunscope_table_rotated', next ? '1' : '0'); } catch (e) { /* ignore */ }
+    return next;
+  });
+
   // Table row interval: 1 = every hour, 2/3/4 = clock-aligned buckets. Default 2.
   const [tableInterval, setTableIntervalState] = useState(() => {
     try { const n = parseInt(localStorage.getItem('sunscope_table_interval'), 10); return [1, 2, 3, 4].includes(n) ? n : 2; } catch (e) { return 2; }
@@ -741,6 +753,9 @@ export function useAppState() {
     headTableRef, bodyTableRef, bodyScrollRef, headTrackRef, tableWrapRef,
     forecast, visibleCols, selectedDay, skinType, vehicleType,
     indoorMode, indoorManaged, showDecimals, showUnits,
+    // The rotated table is a single table with CSS-only sticky edges, so
+    // none of this hook's dual-table syncing applies to it.
+    rotated: tableRotated,
   });
 
   // ── 8. GEOCODING SEARCH ───────────────────────────────────────────────
@@ -888,6 +903,7 @@ export function useAppState() {
     panelOpen, openPanel, closePanel,
     showUnits, toggleShowUnits,
     tableInterval, setTableInterval,
+    tableRotated, toggleTableRotated,
     forecastView, setForecastView,
     // table refs
     headStickyRef, headTrackRef, headTableRef,

assets/js/hooks/useTableScroll.js

@@ -39,6 +39,10 @@ export function useTableScroll({
   indoorManaged,
   showDecimals,
   showUnits,
+  // When the table is rotated it renders as ONE table whose sticky header
+  // row and sticky metric column are handled entirely in CSS. There is no
+  // second table to keep in step, so every effect below short-circuits.
+  rotated = false,
 }) {
   // --- SCROLL INDICATORS ---------------------------------------------
   const [tableCanScrollLeft,  setTableCanScrollLeft]  = useState(false);
@@ -53,6 +57,7 @@ export function useTableScroll({
 
   // --- DRAG-TO-SCROLL ------------------------------------------------
   useEffect(() => {
+    if (rotated) return;
     const el = bodyScrollRef.current;
     if (!el) return;
     let isDown = false;
@@ -99,12 +104,19 @@ export function useTableScroll({
       document.removeEventListener('mouseup',   onMouseUp);
       el.removeEventListener('scroll', updateTableScrollIndicators);
     };
-  }, [forecast]);
+  }, [forecast, rotated]);
 
   // Update indicators after layout sync (columns may have changed width)
   useEffect(() => {
+    if (rotated) {
+      // Nothing is scrolling under our control — clear the fades so they
+      // don't linger over the rotated table.
+      setTableCanScrollLeft(false);
+      setTableCanScrollRight(false);
+      return;
+    }
     updateTableScrollIndicators();
-  }, [forecast, visibleCols, selectedDay]);
+  }, [forecast, visibleCols, selectedDay, rotated]);
 
   // --- BODY SCROLL HANDLER (called from JSX onScroll) ---------------
   const handleBodyScroll = () => {
@@ -129,6 +141,7 @@ export function useTableScroll({
   // "shrink-to-fit then distribute" strategy. See the comments inside
   // sync() for the algorithm.
   useLayoutEffect(() => {
+    if (rotated) return;
     const sync = () => {
       const headTable  = headTableRef.current;
       const bodyTable  = bodyTableRef.current;
@@ -233,7 +246,7 @@ export function useTableScroll({
       if (ro) ro.disconnect();
       window.removeEventListener('resize', sync);
     };
-  }, [forecast, visibleCols, selectedDay, skinType, vehicleType, indoorMode, indoorManaged, showDecimals, showUnits]);
+  }, [forecast, visibleCols, selectedDay, skinType, vehicleType, indoorMode, indoorManaged, showDecimals, showUnits, rotated]);
 
   return {
     tableCanScrollLeft,