diff --git a/static/calendar.html b/static/calendar.html
index aa884fa..ced7b23 100644
--- a/static/calendar.html
+++ b/static/calendar.html
@@ -39,7 +39,7 @@
         <nav class="view-nav" aria-label="Views">
         <a href="./" data-view="map">Weekly</a>
         <a href="calendar" data-view="calendar" class="active">Calendar</a>
-        <a href="day" data-view="day">Day</a>
+        <a href="day" data-view="day">Day Detail</a>
         <a href="compare" data-view="compare">Compare</a>
         <a href="climate">Climate</a>
       </nav>
diff --git a/static/compare.html b/static/compare.html
index ce2c6c5..69b3297 100644
--- a/static/compare.html
+++ b/static/compare.html
@@ -40,7 +40,7 @@
         <nav class="view-nav" aria-label="Views">
         <a href="./" data-view="map">Weekly</a>
         <a href="calendar" data-view="calendar">Calendar</a>
-        <a href="day" data-view="day">Day</a>
+        <a href="day" data-view="day">Day Detail</a>
         <a href="compare" data-view="compare" class="active">Compare</a>
         <a href="climate">Climate</a>
       </nav>
diff --git a/static/day.html b/static/day.html
index 1eb7c11..033545d 100644
--- a/static/day.html
+++ b/static/day.html
@@ -40,7 +40,7 @@
         <nav class="view-nav" aria-label="Views">
         <a href="./" data-view="map">Weekly</a>
         <a href="calendar" data-view="calendar">Calendar</a>
-        <a href="day" data-view="day" class="active">Day</a>
+        <a href="day" data-view="day" class="active">Day Detail</a>
         <a href="compare" data-view="compare">Compare</a>
         <a href="climate">Climate</a>
       </nav>
diff --git a/static/index.html b/static/index.html
index 7b42da3..4197f33 100644
--- a/static/index.html
+++ b/static/index.html
@@ -43,7 +43,7 @@
         <nav class="view-nav" aria-label="Views">
         <a href="./" data-view="map" class="active">Weekly</a>
         <a href="calendar" data-view="calendar">Calendar</a>
-        <a href="day" data-view="day">Day</a>
+        <a href="day" data-view="day">Day Detail</a>
         <a href="compare" data-view="compare">Compare</a>
         <a href="climate">Climate</a>
       </nav>
diff --git a/static/legend.html b/static/legend.html
index 6e6ebea..f4be506 100644
--- a/static/legend.html
+++ b/static/legend.html
@@ -39,7 +39,7 @@
         <nav class="view-nav" aria-label="Views">
         <a href="./" data-view="map">Weekly</a>
         <a href="calendar" data-view="calendar">Calendar</a>
-        <a href="day" data-view="day">Day</a>
+        <a href="day" data-view="day">Day Detail</a>
         <a href="compare" data-view="compare">Compare</a>
         <a href="climate">Climate</a>
       </nav>
diff --git a/static/style.css b/static/style.css
index 4473e74..3124272 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1340,10 +1340,9 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; }
      never runs off-screen (this also fixes the SEO/city pages, whose only panel
      item is the nav). Contents stack nav → °F/°C → account top-to-bottom. */
   .nav-panel {
-    display: flex; flex-direction: column; align-items: stretch; gap: 8px;
+    display: flex; flex-direction: column; align-items: stretch; gap: 6px;
     position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
-    margin: 0; padding: 10px; width: max-content; min-width: 224px;
-    max-width: calc(100vw - 28px);
+    margin: 0; padding: 8px; width: min(208px, calc(100vw - 32px));
     background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
     box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
   }
@@ -1351,17 +1350,29 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; }
   /* Reset the desktop cluster order — the dropdown wants plain DOM order. */
   .nav-panel > .unit-toggle, .nav-panel > .acct, .nav-panel > .view-nav { order: 0; }
 
-  /* Nav links: a full-width vertical list, hairline-separated from the controls
-     below (the :not(:last-child) keeps SEO pages — nav only — divider-free). */
+  /* Nav links: a compact, left-aligned list with an inset hairline between each
+     entry (suppressed around the active pill so nothing crosses it). The whole
+     group is hairline-separated from the controls below — the :not(:last-child)
+     keeps SEO pages, which have nav only, divider-free. */
   .view-nav {
-    display: flex; flex-direction: column; align-items: stretch; gap: 2px; margin: 0;
+    display: flex; flex-direction: column; align-items: stretch; align-self: stretch;
+    gap: 0; margin: 0; width: auto;
     background: transparent; border: 0; border-radius: 0; padding: 0;
   }
   .nav-panel > .view-nav:not(:last-child) {
-    padding-bottom: 8px; margin-bottom: 2px; border-bottom: 1px solid var(--border);
+    padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--border);
   }
-  .view-nav a { min-height: 44px; padding: 11px 12px; justify-content: flex-start; border-radius: 9px; }
-  .view-nav a + a::before { display: none; }
+  .nav-panel .view-nav a {
+    min-height: 40px; padding: 8px 12px; justify-content: flex-start;
+    border-radius: 8px; position: relative;
+  }
+  .nav-panel .view-nav a + a::before { display: none; }
+  .nav-panel .view-nav a:not(:last-child)::after {
+    content: ""; position: absolute; left: 12px; right: 12px; bottom: 0;
+    height: 1px; background: var(--border);
+  }
+  .nav-panel .view-nav a.active::after,
+  .nav-panel .view-nav a:has(+ a.active)::after { display: none; }
 
   /* °F/°C toggle: full-width segmented control inside the dropdown. */
   .nav-panel > .unit-toggle { margin: 0; width: 100%; align-self: stretch; }
diff --git a/static/subscriptions.html b/static/subscriptions.html
index 7290323..2ee736c 100644
--- a/static/subscriptions.html
+++ b/static/subscriptions.html
@@ -37,7 +37,7 @@
         <nav class="view-nav" aria-label="Views">
         <a href="./" data-view="map">Weekly</a>
         <a href="calendar" data-view="calendar">Calendar</a>
-        <a href="day" data-view="day">Day</a>
+        <a href="day" data-view="day">Day Detail</a>
         <a href="compare" data-view="compare">Compare</a>
         <a href="climate">Climate</a>
       </nav>