5.0

New table rotation flip

assets/css/table.css

@@ -1732,6 +1732,20 @@
   flex-shrink: 0;
 }
 
+/* Lays out the sky scope + "3pm" + any event tags on one line. Shared by
+   both orientations — it leads the row normally and heads the column when
+   the table is rotated. */
+.utci-time-inner {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  vertical-align: middle;
+}
+.utci-time-inner svg {
+  margin: -6px 0;
+  flex-shrink: 0;
+}
+
 @media (max-width: 800px) {
   .utci-time {
     font-size: 15px;
@@ -2509,3 +2523,266 @@
     min-height: 48px;
   }
 }
+
+/* ══════════════════════════════════════════════════════════════════════
+   ROTATED TABLE — hours along the top, metrics down the side
+   ─────────────────────────────────────────────────────────────────────
+   Toggled by the rotate button in the table's top-left cell (state lives
+   in useAppState as tableRotated). Unlike the normal orientation — which
+   is two tables kept in step by useTableScroll — this is ONE table in a
+   single scroll pane, so both sticky edges are pure CSS.
+
+   The pane scrolls in both axes rather than letting the page scroll
+   vertically: sticky positioning resolves against the nearest scrolling
+   ancestor, and making the pane scroll horizontally makes it the
+   vertical scroll ancestor too. Scrolling both here is what lets the
+   hour row and the metric column stay pinned at the same time.
+   ══════════════════════════════════════════════════════════════════════ */
+
+.utci-rotated-scroll {
+  overflow: auto;
+  max-height: min(78vh, 900px);
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior: contain;
+  cursor: grab;   /* drag-to-scroll, same as the normal body scroller */
+}
+.utci-rotated-scroll:active {
+  cursor: grabbing;
+}
+
+/* Auto layout — the whole point of the rotated view is that each column
+   is only as wide as the hour it holds, so the fixed layout the normal
+   table needs for its JS width-sync is explicitly turned off here. */
+.utci-table.utci-table-rotated {
+  table-layout: auto;
+  width: max-content;
+  min-width: 100%;
+  /* The separate border model is required, not cosmetic. Under
+     border-collapse:collapse the borders belong to the TABLE rather than
+     to the cells, so they do not travel with a sticky cell — the brass
+     now-column brackets and the row separators paint straight over the
+     pinned metric column and corner as you scroll. Separate borders
+     belong to their cell and move with it. */
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+/* Row separators have to move to the cells: a <tr> border never paints
+   in the separate model. */
+.utci-table-rotated tbody td,
+.utci-table-rotated tbody th {
+  border-bottom: 1px solid #ffffff;
+}
+
+/* ── SPACING ──────────────────────────────────────────────────────────
+   Cells carry icons alongside their numbers (sky scope, cloud, precip,
+   wind vane), so they need noticeably more room than a bare figure. */
+.utci-table-rotated td,
+.utci-table-rotated th {
+  padding: 11px 16px;
+  min-width: 92px;
+  white-space: nowrap;
+}
+
+/* ── STICKY HOUR ROW (top) ────────────────────────────────────────── */
+.utci-table-rotated thead th {
+  position: sticky;
+  top: 0;
+  z-index: 4;
+  background: #f0e4c4;
+  vertical-align: middle;
+}
+
+/* Hour headings read as times, not as column labels — same display serif
+   as the time cells in the normal orientation. */
+.utci-table-rotated .rot-hour-th {
+  font-family: Fraunces, serif;
+  font-weight: 500;
+  font-size: 16px;
+  text-transform: none;
+  letter-spacing: 0;
+  color: #1e1208;
+  min-width: 76px;
+}
+
+/* Stacked, not inline: rotated, every hour is its own COLUMN, so sitting
+   the scope beside the time would set the width of all of them. Stacking
+   puts the scope over the label and lets the columns stay narrow. The
+   negative svg margin that tightens the inline layout has to go — here it
+   would eat into the row above. */
+.utci-table-rotated .rot-hour-th .utci-time-inner {
+  flex-direction: column;
+  gap: 3px;
+}
+.utci-table-rotated .rot-hour-th .utci-time-inner svg {
+  margin: 0;
+}
+.utci-table-rotated .rot-hour-th.is-night {
+  color: #7a5c30;
+}
+
+/* ── STICKY METRIC COLUMN (left) ──────────────────────────────────────
+   The column-group tints (.utci-table th.grp-*) are 50% transparent,
+   which is fine for a heading that has nothing behind it — but data
+   cells scroll UNDER this column, so any transparency lets them show
+   through. The tint is therefore composited over an opaque cream base:
+   --grp-tint carries the group colour, painted as a background-image
+   layer on top of an opaque background-color. */
+/* Set on the group divider rows as well as the metric labels, so a group
+   heading and the metrics beneath it resolve to the SAME colour. Both
+   composite over the identical opaque base below — a shared tint over
+   two different backgrounds is what makes them drift apart. */
+.utci-table-rotated .grp-felt    { --grp-tint: rgba(223,243,236,0.50); }
+.utci-table-rotated .grp-surface { --grp-tint: rgba(221,234,248,0.50); }
+.utci-table-rotated .grp-ambient { --grp-tint: rgba(236,234,227,0.50); }
+.utci-table-rotated .grp-precip  { --grp-tint: rgba(247,228,238,0.50); }
+.utci-table-rotated .grp-sky     { --grp-tint: rgba(234,232,252,0.50); }
+.utci-table-rotated .grp-wind    { --grp-tint: rgba(250,230,224,0.50); }
+.utci-table-rotated .grp-airqual { --grp-tint: rgba(229,240,216,0.50); }
+.utci-table-rotated .grp-solar   { --grp-tint: rgba(250,234,204,0.50); }
+
+/* Over-qualified on purpose: the normal orientation's group rules
+   (.utci-table th.grp-felt, .utci-table .grp-label-row th.grp-felt) are
+   specific enough to win otherwise and would restore the transparency. */
+.utci-table.utci-table-rotated tbody th.rot-metric-label,
+.utci-table.utci-table-rotated tbody th.rot-metric-label.col-info-th:hover,
+.utci-table.utci-table-rotated tbody .grp-label-row--rotated th {
+  background-color: #f0e4c4;
+  background-image: linear-gradient(var(--grp-tint, transparent), var(--grp-tint, transparent));
+}
+
+.utci-table.utci-table-rotated tbody th.rot-metric-label {
+  position: sticky;
+  left: 0;
+  z-index: 3;
+  text-align: left;
+  min-width: 136px;
+  /* box-shadow rather than border-right so the divider sits outside the
+     cell box and cannot add to the column's measured width. */
+  box-shadow: 1px 0 0 rgba(74, 50, 24, 0.18);
+}
+
+/* The corner cell sits in both sticky tracks, so it needs to win over
+   each of them. */
+/* The selector is deliberately over-qualified: the normal orientation's
+   `.utci-table thead th:first-child` rule pins the Hour heading with
+   position:relative + a JS transform, and would otherwise out-specify
+   this and stop the corner sticking. */
+.utci-table.utci-table-rotated thead th.rot-corner {
+  position: sticky;
+  top: 0;
+  left: 0;
+  z-index: 6;
+  background: #f0e4c4;
+  text-align: left;
+  transform: none;
+  box-shadow: 1px 0 0 rgba(74, 50, 24, 0.18);
+}
+.utci-table-rotated .rot-corner-date {
+  display: block;
+  font-size: 10px;
+  letter-spacing: 0.08em;
+  color: #a08040;
+  margin-bottom: 6px;
+}
+.utci-table-rotated .rot-corner-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+@media (max-width: 640px) {
+  /* Icon-only on narrow screens — the toolbar is already tight. */
+  .table-rotate-btn-label {
+    display: none;
+  }
+  .table-rotate-btn {
+    padding: 6px 8px;
+    gap: 0;
+  }
+}
+
+/* ── GROUP DIVIDER ROWS ───────────────────────────────────────────────
+   Stand in for the spanning group labels that sit above the columns in
+   the normal orientation. The cell spans the full width, so the LABEL is
+   what gets pinned rather than the cell. */
+.utci-table-rotated .grp-label-row--rotated th {
+  text-align: left;
+  padding: 5px 16px;
+  border-right: 0;
+}
+.utci-table-rotated .grp-label-pin {
+  position: sticky;
+  left: 16px;
+  display: inline-block;
+}
+
+/* ── NOW / NIGHT ──────────────────────────────────────────────────────
+   Rotated, "now" is a column rather than a row, so the brass bracket
+   that frames it runs down each side instead of across top and bottom. */
+.utci-table-rotated td.is-now,
+.utci-table-rotated th.rot-hour-th.is-now {
+  border-left: 2px solid #c8922a;
+  border-right: 2px solid #c8922a;
+}
+.utci-table-rotated th.rot-hour-th.is-now {
+  background: #fff8e4;
+  border-top: 2px solid #c8922a;
+}
+.utci-table-rotated td.is-night {
+  color: #7a5c30;
+}
+
+/* ── ROTATE BUTTON ────────────────────────────────────────────────────
+   Sits in the toolbar after the view switcher and Edit columns, and only
+   while the detailed table is showing. */
+.table-rotate-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 11px;
+  border: 1px solid #c9b08a;
+  border-radius: 6px;
+  background: #fffcf2;
+  color: #8a6a34;
+  font-family: Manrope, sans-serif;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  line-height: 1;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+.table-rotate-btn-icon {
+  font-size: 14px;
+  line-height: 1;
+}
+.table-rotate-btn:hover {
+  background: #f6ead0;
+  color: #6b4f2a;
+}
+.table-rotate-btn.on {
+  background: #c8922a;
+  border-color: #c8922a;
+  color: #fffcf2;
+}
+
+/* ── MOBILE ───────────────────────────────────────────────────────── */
+@media (max-width: 640px) {
+  .utci-rotated-scroll {
+    max-height: min(70vh, 620px);
+  }
+  .utci-table-rotated td,
+  .utci-table-rotated th {
+    padding: 9px 11px;
+    min-width: 80px;
+  }
+  .utci-table-rotated .rot-hour-th {
+    font-size: 14px;
+    min-width: 68px;
+  }
+  .utci-table-rotated .rot-metric-label {
+    min-width: 112px;
+  }
+}

assets/js/app.js

@@ -235,7 +235,7 @@ export function UTCIForecast() {
     utciEnv, setUtciEnv,
     tableRotated, toggleTableRotated,
     headStickyRef, headTrackRef, headTableRef,
-    bodyScrollRef, bodyTableRef, tableWrapRef,
+    bodyScrollRef, bodyTableRef, tableWrapRef, rotatedScrollRef,
     colPopup, colPopupRef,
     handleThClick, handleThEnter, handleThLeave,
     handlePopupEnter, handlePopupLeave,
@@ -1144,6 +1144,15 @@ export function UTCIForecast() {
                   <span class="col-toggles-edit-btn-label">${!isPro ? '🔒 Edit columns' : colTogglesOpen ? 'Hide Columns' : 'Edit columns'}</span>
                   <svg class="col-toggles-edit-btn-icon" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M2 4l4 4 4-4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>
                 </button>
+                ${forecastView === 'table' && html`
+                  <button type="button"
+                    class=${'table-rotate-btn table-rotate-btn--toolbar' + (tableRotated ? ' on' : '')}
+                    title=${tableRotated ? 'Hours run along the top — click for hours down the side' : 'Hours run down the side — click for hours along the top'}
+                    aria-pressed=${tableRotated ? 'true' : 'false'}
+                    onClick=${toggleTableRotated}>
+                    <span class="table-rotate-btn-icon" aria-hidden="true">⭮</span>
+                    <span class="table-rotate-btn-label">Rotate</span>
+                  </button>`}
               </span>
               ${forecastView === 'simple' && (() => {
                 const showFur    = visibleCols.furSurfaceT;
@@ -1407,26 +1416,20 @@ export function UTCIForecast() {
                   </span>`;
               };
 
-              // Lives in the table's top-left cell in both orientations.
-              // stopPropagation so it doesn't also fire the header cell's
-              // column-info popup, same as the row-interval stepper.
-              const rotateBtn = html`
-                <button type="button"
-                  class=${`table-rotate-btn${tableRotated ? ' on' : ''}`}
-                  title=${tableRotated ? 'Hours down the side' : 'Hours along the top'}
-                  aria-label="Rotate table"
-                  aria-pressed=${tableRotated ? 'true' : 'false'}
-                  onClick=${(e) => { e.stopPropagation(); toggleTableRotated(); }}
-                >⭮</button>`;
-
               // ── ROTATED: hours across the top, metrics down the side ──
               // One table, not two: the sticky top row and sticky left
               // column are pure CSS here, so none of the head/body width
               // syncing in useTableScroll is needed (it is disabled while
               // rotated).
+              // The key matters: both orientations root at a <div>, so
+              // without distinct keys Preact diffs one into the other and
+              // reuses the DOM nodes — carrying over the inline column
+              // widths and header transforms that the width-sync leaves
+              // behind, which is what knocks the columns out of
+              // alignment when you flip back.
               if (tableRotated) return html`
-                <div class=${`utci-table-wrap is-rotated${showUnits ? '' : ' no-units'}`}>
+                <div key="table-rotated" class=${`utci-table-wrap is-rotated${showUnits ? '' : ' no-units'}`}>
-                  <div class="utci-rotated-scroll">
+                  <div class="utci-rotated-scroll" ref=${rotatedScrollRef}>
                     <table class="utci-table utci-table-rotated">
                       <thead>
                         <tr>
@@ -1439,7 +1442,6 @@ export function UTCIForecast() {
                               <span class="hour-interval" onClick=${(e) => e.stopPropagation()}>
                                 <${RowStepper} value=${tableInterval} onChange=${setTableInterval} showLabel=${false} />
                               </span>
-                              ${rotateBtn}
                             </span>
                           </th>
                           ${tableRows.map(r => {
@@ -1463,7 +1465,7 @@ export function UTCIForecast() {
                               ${newGroup && html`
                                 <tr class="grp-label-row grp-label-row--rotated">
                                   <th class=${`grp-label grp-label-${newGroup} grp-${newGroup}`} scope="rowgroup" colspan=${tableRows.length + 1}>
-                                    ${GROUP_LABELS[newGroup]}
+                                    <span class="grp-label-pin">${GROUP_LABELS[newGroup]}</span>
                                   </th>
                                 </tr>`}
                               <tr class="rot-metric-row">
@@ -1494,7 +1496,7 @@ export function UTCIForecast() {
               // Split into a sticky header table and a scrolling body
               // table whose column widths useTableScroll keeps in step.
               return html`
-            <div class=${`utci-table-wrap${tableCanScrollLeft ? ' scroll-fade-left' : ''}${tableCanScrollRight ? ' scroll-fade-right' : ''}${showUnits ? '' : ' no-units'}`} ref=${tableWrapRef}>
+            <div key="table-normal" class=${`utci-table-wrap${tableCanScrollLeft ? ' scroll-fade-left' : ''}${tableCanScrollRight ? ' scroll-fade-right' : ''}${showUnits ? '' : ' no-units'}`} ref=${tableWrapRef}>
               <span class="utci-scroll-chevron left" aria-hidden="true">‹</span>
               <span class="utci-scroll-chevron right" aria-hidden="true">›</span>
 
@@ -1509,7 +1511,6 @@ export function UTCIForecast() {
                           <span class="hour-interval" onClick=${(e) => e.stopPropagation()}>
                             <${RowStepper} value=${tableInterval} onChange=${setTableInterval} showLabel=${false} />
                           </span>
-                          ${rotateBtn}
                         </th>
                         ${visibleColumnDefs.map(d => html`
                           <th key=${d.key} scope="col"

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;
+    // Whichever element is actually the scroller in the current
-    const el = bodyScrollRef.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;