Beta4

Fix mobile table issues

assets/sunscope.css

@@ -82,7 +82,7 @@ body {
   color: #1e1208;
   background: #f5edd6;
   min-height: 100vh;
-  padding: 52px 28px 32px;
+  padding: 52px 10px 32px;
   position: relative;
   /* overflow-x: clip (not hidden) — `clip` clips horizontal overflow
      WITHOUT making this a scroll container, so `position: sticky` on
@@ -564,6 +564,12 @@ body {
   width: 100%;
   border-collapse: collapse;
   font-size: 14px;
+  /* Fixed layout so the explicit per-cell widths set by the JS width-sync
+     (see useLayoutEffect in sunscope.js) are actually enforced. Without
+     this the browser's auto layout treats those widths as suggestions and
+     redistributes space, which makes the header and body columns drift
+     apart the further right you scroll. */
+  table-layout: fixed;
 }
 
 /* Column headings  (Hour, Air, RH, Wind...).
@@ -627,29 +633,40 @@ body {
   border-right: 1px solid #ede4cc;
 }
 
+/* The Dir column is centered on both desktop and mobile so the
+   compass vane sits with even padding either side — especially
+   important on mobile where the compass label is hidden and there's
+   no text to balance the right-aligned content. */
+.utci-table th.utci-dir-cell,
+.utci-table td.utci-dir-cell {
+  text-align: center;
+}
+
+/* "Tight" header — for columns whose body content is narrower than
+   the default tracked-out header would suggest (Air, Pcpt). Reducing
+   the letter-spacing shrinks the heading's natural width so it stops
+   driving the column wider than the body needs. Right-aligned values
+   then sit with balanced visual padding on either side. */
+.utci-table th.utci-tight-head {
+  letter-spacing: 0.04em;
+}
+
 
 /* ── 8. NOW-ROW & NIGHT-ROW DECORATIONS ─────────────────────────────── */
 
-/* "Currently this hour" — the highlighted row */
+/* "Currently this hour" — the highlighted row.
+   The row gets a cream-yellow background and darker text. No left
+   stripe or pip — the colour shift alone signals "this is now". */
 .utci-table tbody tr.is-now {
   background: #fff8e4 !important;
-  box-shadow: inset 3px 0 #c8922a;      /* brass stripe down the left */
 }
 
 .utci-table tbody tr.is-now td {
   color: #1e1208;
-}
-
-/* The little brass pip in the time cell of the current hour */
-.now-pip {
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: #c8922a;
-  margin-right: 7px;
-  vertical-align: middle;
-  box-shadow: 0 0 8px #c8922a73;
+  /* Brass bracket framing the current-hour row top and bottom — clean,
+     definitive, no left stripe needed. */
+  border-top: 2px solid #c8922a;
+  border-bottom: 2px solid #c8922a;
 }
 
 /* Night-time hours get a slightly muted text colour */
@@ -843,4 +860,19 @@ body {
     margin: 0 auto;
   }
 
+  /* Halve the hourly-table cell padding on mobile so more columns fit
+     in the viewport before the horizontal scrollbar kicks in. */
+  .utci-table th {
+    padding: 7px 6px;
+  }
+  .utci-table td {
+    padding: 5px 6px;
+  }
+
+  /* Drop the compass-label text ("N", "NW"...) next to the wind vane on
+     mobile — the vane arrow alone is enough at small sizes. */
+  .wind-dir-label {
+    display: none;
+  }
+
 }