4.9.3

Layout tweaks

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,