5.0.2

Fix rotated table layout issues

assets/js/hooks/useAppState.js

@@ -732,8 +732,6 @@ 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 {
@@ -753,7 +751,6 @@ 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
@@ -910,7 +907,7 @@ export function useAppState() {
     forecastView, setForecastView,
     // table refs
     headStickyRef, headTrackRef, headTableRef,
-    bodyScrollRef, bodyTableRef, tableWrapRef, rotatedScrollRef,
+    bodyScrollRef, bodyTableRef, tableWrapRef,
     // column popup
     colPopup, colPopupRef,
     handleThClick, handleThEnter, handleThLeave,

assets/js/hooks/useTableScroll.js

@@ -28,7 +28,6 @@ export function useTableScroll({
   headTableRef,
   bodyTableRef,
   bodyScrollRef,
-  rotatedScrollRef,
   headTrackRef,
   tableWrapRef,
   forecast,
@@ -40,11 +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 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 only changes what the head/body tables CONTAIN (hours across
+  // the top instead of metrics), not the structure — both orientations
+  // 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,
 }) {
   // --- SCROLL INDICATORS ---------------------------------------------
@@ -60,27 +58,20 @@ export function useTableScroll({
 
   // --- DRAG-TO-SCROLL ------------------------------------------------
   useEffect(() => {
-    // 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;
+    const el = 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 scroller
+      // Only act on clicks that land inside the body 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';
@@ -89,7 +80,6 @@ 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;
@@ -118,13 +108,6 @@ export function useTableScroll({
 
   // 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, rotated]);
 
@@ -151,12 +134,25 @@ 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;
       const bodyScroll = bodyScrollRef.current;
-      if (!headTable || !bodyTable || !bodyScroll) return;
+      if (!bodyTable || !bodyScroll) return;
+
+      // Rotated renders a SINGLE table, so there is no head table and
+      // nothing to keep in step. The scroll-fade still needs to know how
+      // wide the pinned column is, though — and it can't be assumed from
+      // CSS, because auto layout widens that column to fit the longest
+      // metric name. Measure it, then stop.
+      if (!headTable) {
+        const firstCell = bodyTable.querySelector('tbody tr > *');
+        if (firstCell && tableWrapRef && tableWrapRef.current) {
+          const w = Math.round(firstCell.getBoundingClientRect().width);
+          tableWrapRef.current.style.setProperty('--hour-col-w', `${w}px`);
+        }
+        return;
+      }
       const bodyRow = bodyTable.querySelector('tbody tr');
       const headRow = headTable.querySelector('thead tr:last-child');
       if (!bodyRow || !headRow) return;