From 722e278f8e48d182b33d33a7285d2b743831c34b Mon Sep 17 00:00:00 2001
From: Nate <nate@necloud.us>
Date: Mon, 16 Mar 2026 13:24:57 -0400
Subject: [PATCH] Improve mobile responsiveness for search, tabs, radar
 controls, and dense rows

---
 app/public/index.html |  2 +-
 app/public/style.css  | 86 +++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 84 insertions(+), 4 deletions(-)

diff --git a/app/public/index.html b/app/public/index.html
index 1c3c34e..46ea61f 100644
--- a/app/public/index.html
+++ b/app/public/index.html
@@ -204,7 +204,7 @@
     <div id="alerts-wrap" class="alerts-wrap hidden">
       <div class="section-head">
         <span class="section-label">Weather Alerts</span>
-        <span>
+        <span class="section-actions">
           <button id="notify-btn" class="link-btn" type="button">Enable notifications</button>
           <button id="push-test-btn" class="link-btn" type="button">Send test push</button>
         </span>
diff --git a/app/public/style.css b/app/public/style.css
index facffb8..082e2f9 100644
--- a/app/public/style.css
+++ b/app/public/style.css
@@ -541,6 +541,14 @@ a:hover { text-decoration: underline; }
   margin-bottom: 0.6rem;
 }
 
+.section-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
 .section-label { font-size: 0.62rem; letter-spacing: 0.14em; color: var(--ink-light); text-transform: uppercase; }
 .section-note { font-size: 0.6rem; color: var(--ink-light); font-style: italic; }
 
@@ -585,6 +593,7 @@ a:hover { text-decoration: underline; }
   display: flex;
   align-items: center;
   gap: 0.75rem;
+  flex-wrap: wrap;
   padding: 0.6rem 0.75rem;
   background: var(--paper-darker);
   border-top: 1px solid var(--border);
@@ -636,6 +645,7 @@ a:hover { text-decoration: underline; }
   white-space: nowrap;
   min-width: 80px;
   text-align: right;
+  margin-left: auto;
 }
 
 /* Radar legend */
@@ -809,19 +819,89 @@ select:focus-visible {
   .masthead { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
   .masthead h1 { font-size: 1.6rem; }
   .tagline { display: none; }
-  .tabs { grid-column: 1 / -1; overflow-x: auto; }
-  .tab { min-width: 88px; }
+  .tabs {
+    grid-column: 1 / -1;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scroll-snap-type: x proximity;
+  }
+  .tab {
+    min-width: 80px;
+    padding: 0.35rem 0.65rem;
+    scroll-snap-align: start;
+  }
+
+  .search-row {
+    display: grid;
+    grid-template-columns: 1fr auto auto;
+    gap: 0.4rem;
+  }
+  .search-row input {
+    grid-column: 1 / -1;
+    border-right: 1px solid var(--border);
+  }
+  .search-row button {
+    border: 1px solid var(--border);
+  }
+  #search-btn {
+    min-width: 108px;
+  }
+  #locate-btn,
+  #units-btn {
+    border-left: 1px solid var(--border) !important;
+    min-width: 56px;
+    padding: 0.6rem 0.65rem !important;
+  }
+
   .stats-bar { grid-template-columns: repeat(3, 1fr); }
   .astro-grid,
   .aq-grid { grid-template-columns: 1fr; }
   .current-grid { grid-template-columns: 1fr; }
   .temp-big { font-size: 4rem; }
-  .day-row { grid-template-columns: 80px 36px 1fr 70px; }
+  .day-row {
+    grid-template-columns: 74px 32px 1fr auto;
+    gap: 0.55rem;
+    padding: 0.75rem 0.7rem;
+  }
+  .day-desc {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .day-temps {
+    font-size: 0.78rem;
+  }
   .day-meta { display: none; }
   .radar-map { height: 240px; }
   .legend-bar { width: 50px; }
   .loc-actions { align-items: flex-start; margin-top: 0.5rem; }
   .loc-header { flex-direction: column; align-items: flex-start; }
+
+  .section-head {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 0.35rem;
+  }
+  .section-actions {
+    justify-content: flex-start;
+  }
+
+  .radar-controls {
+    gap: 0.55rem;
+    padding: 0.55rem;
+  }
+  .radar-timeline {
+    order: 3;
+    width: 100%;
+    flex-basis: 100%;
+  }
+  .radar-ts {
+    order: 2;
+    margin-left: 0;
+    min-width: 0;
+    text-align: left;
+  }
+
   .settings-row { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
   .settings-value { text-align: left; }
   .map-overview { height: 280px; }