From 9b7089ca06a7e306f52e4f925a9bb4f56f56969d Mon Sep 17 00:00:00 2001
From: fraxle <fraxle@yahoo.co.uk>
Date: Wed, 27 May 2026 20:30:39 +0100
Subject: [PATCH] 2.0

Layout fixes
Mobile cleanup
Location right hand side
Moon style updated - again
---
 assets/css/header.css           | 27 +++++++++++++++++++--------
 assets/css/table.css            |  1 -
 assets/css/ui.css               | 18 ++++++++++++++----
 assets/js/app.js                | 19 +++++++++----------
 assets/js/components.js         | 24 ++++++++++++------------
 assets/js/components/DayTabs.js |  4 +++-
 6 files changed, 57 insertions(+), 36 deletions(-)

diff --git a/assets/css/header.css b/assets/css/header.css
index 678074a..139584c 100644
--- a/assets/css/header.css
+++ b/assets/css/header.css
@@ -9,8 +9,8 @@
   grid-template-columns: 1fr auto 1fr;  /* title | dial | search */
   gap: 32px;
   align-items: center;
-  padding-bottom: 32px;
-  margin-bottom: 32px;
+  padding-bottom: 14px;
+  margin-bottom: 14px;
 }
 
 .header-right {
@@ -58,8 +58,10 @@
   font-style: italic;
   font-weight: 800;
   font-size: 18px;
-  margin-top: 12px;
+  margin-top: 8px;
+  margin-bottom: 0;
   color: #1e1208;
+  text-align: right;
 }
 
 /* The lat/lon below the location */
@@ -70,7 +72,7 @@
   color: #b09870;
   display: block;
   margin-top: 4px;
-  margin-left: 15px;
+  margin-left: 0;
   letter-spacing: 0.08em;
 }
 
@@ -273,17 +275,26 @@
   }
 
   .scope-ring {
-    width: 160px;
-    height: 160px;
-    margin: 0 auto;               /* centre the dial */
+    width: 250px;
+    height: 250px;
+    margin: 0 auto;
   }
 
   .scope-env-row {
-    width: 160px;                 /* match dial width on mobile */
+    width: 250px;
   }
 
   .utci-current-loc {
     margin-top: 4px;              /* tighten gap above location on mobile */
+    text-align: center;
+  }
+
+  .utci-loc-coords {
+    text-align: center;
+  }
+
+  .utci-fetch-time {
+    text-align: center;
   }
 
   .utci-search-wrap {
diff --git a/assets/css/table.css b/assets/css/table.css
index b54c6f3..351071f 100644
--- a/assets/css/table.css
+++ b/assets/css/table.css
@@ -11,7 +11,6 @@
 /* Wrapper that hosts the scrollable strip, edge fades, and chevrons. */
 .utci-day-tabs-wrap {
   position: relative;
-  margin-bottom: 18px;
 }
 
 /* Edge fade gradients — only show when there's content to scroll to. */
diff --git a/assets/css/ui.css b/assets/css/ui.css
index 081c137..ac8f745 100644
--- a/assets/css/ui.css
+++ b/assets/css/ui.css
@@ -616,10 +616,10 @@
   margin-bottom: 18px;
 }
 .utci-fetch-time {
-  text-align: left;
+  text-align: right;
   font-size: 0.72rem;
   opacity: 0.5;
-  margin: 0.70rem 0 0.4rem;
+  margin: 0.3rem 0 0;
   letter-spacing: 0.03em;
 }
 
@@ -810,16 +810,26 @@
     align-items: center;
   }
 
+  .utci-current-loc,
+  .utci-loc-coords,
+  .utci-fetch-time {
+    text-align: center;
+  }
+
   .utci-search-wrap {
     width: 100%;
   }
 
   .scope-ring {
-    width: 180px;                       /* smaller dial on mobile */
-    height: 180px;
+    width: 250px;
+    height: 250px;
     margin: 0 auto;
   }
 
+  .scope-env-row {
+    width: 250px;
+  }
+
   /* Halve the hourly-table cell padding on mobile so more columns fit
      in the viewport before the horizontal scrollbar kicks in. */
   .utci-table th {
diff --git a/assets/js/app.js b/assets/js/app.js
index 03ef04c..cbfea36 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -277,14 +277,6 @@ export function UTCIForecast() {
               <span class="title-sun">SUN</span><span class="title-scope">Scope</span>
             </h1>
             <div class="utci-tagline">See the sun the way your body does.</div>
-            <div class="utci-current-loc">
-              ↳ ${location.name}
-              <span class="utci-loc-coords">
-                ${location.lat.toFixed(3)}°, ${location.lon.toFixed(3)}°
-              </span>
-            </div>
-            ${fetchedAt && !loading && html`
-              <div class="utci-fetch-time">Last update: ${fetchedAt.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</div>`}
           </div>
 
           <div class="scope-col">
@@ -316,8 +308,7 @@ export function UTCIForecast() {
 
           <div class="header-right">
             <div class="utci-search-wrap">
-              <label class="utci-search-label">Change location</label>
-              <input
+<input
                 class="utci-search"
                 type="text"
                 placeholder="Search any town or city…"
@@ -350,6 +341,14 @@ export function UTCIForecast() {
                 </div>`}
               ${searching && html`<div class="utci-searching">Searching…</div>`}
             </div>
+            <div class="utci-current-loc">
+              ↳ ${location.name}
+              <span class="utci-loc-coords">
+                ${location.lat.toFixed(3)}°, ${location.lon.toFixed(3)}°
+              </span>
+            </div>
+            ${fetchedAt && !loading && html`
+              <div class="utci-fetch-time">Last update: ${fetchedAt.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</div>`}
           </div>
         </div>
 
diff --git a/assets/js/components.js b/assets/js/components.js
index 8b2d16d..223490d 100644
--- a/assets/js/components.js
+++ b/assets/js/components.js
@@ -234,9 +234,9 @@ export function SkyScope({ elev, dt, glob = 0, size = 26 }) {
           <circle cx=${shadowCx} cy=${r} r=${moonR} fill="black" />
         </mask>
         <!-- Moon texture pattern - sized to fit the moon disk -->
-        <pattern id=${`moon-tex-${uid}`} x=${r - moonR} y=${r - moonR}
-                 width=${moonR * 2} height=${moonR * 2} patternUnits="userSpaceOnUse">
-          <image href=${MOON_TEX} x="0" y="0" width=${moonR * 2} height=${moonR * 2} />
+        <pattern id=${`moon-tex-${uid}`} x=${r - moonR - 2} y=${r - moonR - 2}
+                 width=${moonR * 2 + 4} height=${moonR * 2 + 4} patternUnits="userSpaceOnUse">
+          <image href=${MOON_TEX} x="0" y="0" width=${moonR * 2 + 4} height=${moonR * 2 + 4} />
         </pattern>
       </defs>
 
@@ -258,15 +258,15 @@ export function SkyScope({ elev, dt, glob = 0, size = 26 }) {
         <g clip-path=${`url(#${clipId})`}>
           <!-- Lit crescent via mask -->
           <circle cx=${r} cy=${r} r=${moonR}
-                  fill="#ddd8c8" mask=${`url(#moon-mask-${uid})`} />
+                  fill="#e7e3d4" mask=${`url(#moon-mask-${uid})`} />
           <!-- Texture overlay on lit face -->
           <circle cx=${r} cy=${r} r=${moonR}
                   fill=${`url(#moon-tex-${uid})`}
                   mask=${`url(#moon-mask-${uid})`}
-                  opacity="0.45" />
+                  opacity="0.55" />
           <!-- Dim unlit face so the full disk outline remains visible -->
           <circle cx=${r} cy=${r} r=${moonR}
-                  fill="rgba(180,170,210,0.18)" stroke="rgba(245,237,214,0.45)" stroke-width="0.4" />
+                  fill="rgba(200,192,230,0.08)" stroke="none" />
         </g>`}
 
       <!-- Brass scope ring -->
@@ -562,9 +562,9 @@ export function ScopeReticle({ value, cat, loading, elev = 0, dt = new Date(), g
           <circle cx=${moonShadowCx} cy=${moonY} r=${moonDrawR} fill="black" />
         </mask>
         <!-- Moon texture pattern - sized to fit the landscape moon disk -->
-        <pattern id="scope-moon-tex" x=${cx - moonDrawR} y=${moonY - moonDrawR}
-                 width=${moonDrawR * 2} height=${moonDrawR * 2} patternUnits="userSpaceOnUse">
-          <image href=${MOON_TEX} x="0" y="0" width=${moonDrawR * 2} height=${moonDrawR * 2} />
+        <pattern id="scope-moon-tex" x=${cx - moonDrawR - 2} y=${moonY - moonDrawR - 2}
+                 width=${moonDrawR * 2 + 4} height=${moonDrawR * 2 + 4} patternUnits="userSpaceOnUse">
+          <image href=${MOON_TEX} x="0" y="0" width=${moonDrawR * 2 + 4} height=${moonDrawR * 2 + 4} />
         </pattern>
       </defs>
       <circle cx=${cx} cy=${cy} r="96" fill="url(#scope-bg-glow)" />
@@ -581,15 +581,15 @@ export function ScopeReticle({ value, cat, loading, elev = 0, dt = new Date(), g
         ${(isTwil || (!isDay && !isTwil)) && html`<${Fragment}>
             <!-- Lit crescent — full moon disk clipped by the phase mask -->
             <circle cx=${cx} cy=${moonY} r=${moonDrawR}
-                    fill="#ddd8c8" mask="url(#scope-moon-mask)" />
+                    fill="#e7e3d4" mask="url(#scope-moon-mask)" />
             <!-- Texture overlay on lit face -->
             <circle cx=${cx} cy=${moonY} r=${moonDrawR}
                     fill="url(#scope-moon-tex)"
                     mask="url(#scope-moon-mask)"
-                    opacity="0.45" />
+                    opacity="0.55" />
             <!-- Dim unlit face so the full disk outline is still visible -->
             <circle cx=${cx} cy=${moonY} r=${moonDrawR}
-                    fill="rgba(180,170,210,0.18)" stroke="rgba(245,237,214,0.45)" stroke-width="0.7" />
+                    fill="rgba(200,192,230,0.08)" stroke="none" />
           </>`}
       </g>
       ${(() => {
diff --git a/assets/js/components/DayTabs.js b/assets/js/components/DayTabs.js
index ed793e4..8030bf6 100644
--- a/assets/js/components/DayTabs.js
+++ b/assets/js/components/DayTabs.js
@@ -166,6 +166,7 @@ export function DayTabs({
                 right: 0,
                 height: isActive ? '5px' : '4px',
                 background: band.bg,
+                borderTop: '1px solid #c9b08a',
                 borderRadius: '0 0 2px 2px',
                 transition: 'height 0.1s',
               }} aria-hidden="true"></span>
@@ -396,10 +397,11 @@ export function DayTabs({
             display: 'flex',
             alignItems: 'center',
             gap: '10px',
-            margin: '8px 0 4px',
+            margin: '0 0 14px',
             padding: '6px 10px',
             background: band.tint,
             borderLeft: `3px solid ${band.edge}`,
+            borderBottom: `1px solid ${band.edge}`,
             borderRadius: '0 4px 4px 0',
             fontSize: '12px',
             color: '#3a2a18',