5.0

New table rotation flip

assets/js/hooks/useAppState.js

@@ -732,6 +732,8 @@ export function useAppState() {
   const bodyScrollRef = useRef(null);
   const bodyTableRef  = useRef(null);
   const tableWrapRef  = useRef(null);
+  // The rotated orientation's single scroll pane (scrolls in both axes).
+  const rotatedScrollRef = useRef(null);
 
   // ── 7. COLUMN POPUP + TABLE SCROLL ───────────────────────────────────
   const {
@@ -751,6 +753,7 @@ export function useAppState() {
     handleBodyScroll,
   } = useTableScroll({
     headTableRef, bodyTableRef, bodyScrollRef, headTrackRef, tableWrapRef,
+    rotatedScrollRef,
     forecast, visibleCols, selectedDay, skinType, vehicleType,
     indoorMode, indoorManaged, showDecimals, showUnits,
     // The rotated table is a single table with CSS-only sticky edges, so
@@ -907,7 +910,7 @@ export function useAppState() {
     forecastView, setForecastView,
     // table refs
     headStickyRef, headTrackRef, headTableRef,
-    bodyScrollRef, bodyTableRef, tableWrapRef,
+    bodyScrollRef, bodyTableRef, tableWrapRef, rotatedScrollRef,
     // column popup
     colPopup, colPopupRef,
     handleThClick, handleThEnter, handleThLeave,

assets/js/hooks/useTableScroll.js

@@ -28,6 +28,7 @@ export function useTableScroll({
   headTableRef,
   bodyTableRef,
   bodyScrollRef,
+  rotatedScrollRef,
   headTrackRef,
   tableWrapRef,
   forecast,
@@ -41,7 +42,9 @@ export function useTableScroll({
   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.
+  // second table to keep in step, so the width-sync and scroll-indicator
+  // effects short-circuit — but drag-to-scroll still applies, just to the
+  // rotated pane (which scrolls in both axes) instead of the body table.
   rotated = false,
 }) {
   // --- SCROLL INDICATORS ---------------------------------------------
@@ -57,21 +60,27 @@ export function useTableScroll({
 
   // --- DRAG-TO-SCROLL ------------------------------------------------
   useEffect(() => {
-    if (rotated) return;
-    const el = bodyScrollRef.current;
+    // Whichever element is actually the scroller in the current
+    // orientation. Rotated, it scrolls vertically too, so the drag
+    // follows both axes.
+    const el = rotated ? (rotatedScrollRef && rotatedScrollRef.current) : bodyScrollRef.current;
     if (!el) return;
     let isDown = false;
     let startX = 0;
+    let startY = 0;
     let startScroll = 0;
+    let startScrollTop = 0;
 
     const onMouseDown = (e) => {
-      // Only act on clicks that land inside the body scroller
+      // Only act on clicks that land inside the scroller
       if (!el.contains(e.target)) return;
       if (e.button !== 0) return;
       if (e.target.closest('button, a, input, select')) return;
       isDown = true;
       startX = e.clientX;
+      startY = e.clientY;
       startScroll = el.scrollLeft;
+      startScrollTop = el.scrollTop;
       el.style.cursor = 'grabbing';
       document.body.style.userSelect = 'none';
       document.body.style.webkitUserSelect = 'none';
@@ -80,6 +89,7 @@ export function useTableScroll({
       if (!isDown) return;
       const dx = e.clientX - startX;
       el.scrollLeft = startScroll - dx;
+      if (rotated) el.scrollTop = startScrollTop - (e.clientY - startY);
     };
     const onMouseUp = () => {
       if (!isDown) return;