From efaab17c5467ed7277b16a24605ca1d5d1ff38ff Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Tue, 14 Jul 2026 02:36:56 +0000
Subject: [PATCH] Mobile top-bar wordmark, bottom-sheet-aware overlays,
 relocated axis zoom

- Collapse the "Approach Map" wordmark to "AM" on phones (<=640px) so the
  top-bar toggle controls keep room.
- Add a --map-bottom-inset var (44px on phones) and apply it to the bottom-
  anchored map overlays (active-procedures box, right control stack, mapbox
  NavigationControl) so none hide behind the peeking bottom sheet.
- Move the per-axis (anisotropic) zoom cluster out of the tall right-hand
  column to the bottom-right, just left of the normal zoom controls, in all
  views.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019wFHFWhJNUpXAPHQ1gj28M
---
 .../layout/ActiveProceduresOverlay.module.css |  3 ++-
 src/components/layout/TopBar.module.css       | 14 ++++++++++++
 src/components/layout/TopBar.tsx              |  8 ++++++-
 src/components/map/AppMap.tsx                 | 22 ++++++++++++++++---
 src/index.css                                 | 18 +++++++++++++++
 5 files changed, 60 insertions(+), 5 deletions(-)

diff --git a/src/components/layout/ActiveProceduresOverlay.module.css b/src/components/layout/ActiveProceduresOverlay.module.css
index d40b051..5f65d49 100644
--- a/src/components/layout/ActiveProceduresOverlay.module.css
+++ b/src/components/layout/ActiveProceduresOverlay.module.css
@@ -1,6 +1,7 @@
 .overlay {
   position: absolute;
-  bottom: 48px;
+  /* On phones add --map-bottom-inset so the box clears the peeking bottom sheet. */
+  bottom: calc(48px + var(--map-bottom-inset, 0px));
   left: 12px;
   background: var(--overlay-bg);
   border: 1px solid var(--overlay-border);
diff --git a/src/components/layout/TopBar.module.css b/src/components/layout/TopBar.module.css
index 10c48d3..b76b23d 100644
--- a/src/components/layout/TopBar.module.css
+++ b/src/components/layout/TopBar.module.css
@@ -20,6 +20,20 @@
   text-transform: uppercase;
 }
 
+.brandShort {
+  display: none;
+}
+
+/* Phone: shrink the wordmark to "AM" so the top-bar controls keep room. */
+@media (max-width: 640px) {
+  .brandFull {
+    display: none;
+  }
+  .brandShort {
+    display: inline;
+  }
+}
+
 .center {
   flex: 1;
   max-width: 400px;
diff --git a/src/components/layout/TopBar.tsx b/src/components/layout/TopBar.tsx
index 845e902..b9b21dd 100644
--- a/src/components/layout/TopBar.tsx
+++ b/src/components/layout/TopBar.tsx
@@ -12,7 +12,13 @@ import styles from './TopBar.module.css'
 export function TopBar() {
   return (
     <header className={styles.topbar}>
-      <div className={styles.brand}>Approach Map</div>
+      <div className={styles.brand}>
+        {/* Collapses to "AM" on phones to free top-bar space for controls. */}
+        <span className={styles.brandFull}>Approach Map</span>
+        <span className={styles.brandShort} aria-hidden="true">
+          AM
+        </span>
+      </div>
       <div className={styles.center}>
         <AirportSearch />
       </div>
diff --git a/src/components/map/AppMap.tsx b/src/components/map/AppMap.tsx
index 9e3a9b0..eb089a3 100644
--- a/src/components/map/AppMap.tsx
+++ b/src/components/map/AppMap.tsx
@@ -215,12 +215,13 @@ export function AppMap() {
       {/* Bottom-right control stack: traffic filters above the altitude
           filter. Anchored at the bottom (clearing the NavigationControl) so it
           grows upward when the altitude filter shows its summary badge, keeping
-          a consistent gap between the two boxes. */}
+          a consistent gap between the two boxes. On phones the bottom offset
+          adds --map-bottom-inset so the stack clears the peeking bottom sheet. */}
       <div
         style={{
           position: 'absolute',
           right: 10,
-          bottom: 110,
+          bottom: 'calc(110px + var(--map-bottom-inset, 0px))',
           zIndex: 10,
           display: 'flex',
           flexDirection: 'column',
@@ -229,12 +230,27 @@ export function AppMap() {
           pointerEvents: 'none',
         }}
       >
-        <AxisZoomControls />
         <PathControls />
         <TrafficFilter />
         <AltitudeFilter />
       </div>
 
+      {/* Per-axis zoom cluster parked at the bottom-right, just left of the
+          mapbox NavigationControl (bottoms aligned), so the main control column
+          above stays short instead of running the full height of the map. */}
+      <div
+        style={{
+          position: 'absolute',
+          right: 48,
+          bottom: 'calc(10px + var(--map-bottom-inset, 0px))',
+          zIndex: 10,
+          display: 'flex',
+          pointerEvents: 'none',
+        }}
+      >
+        <AxisZoomControls />
+      </div>
+
       <ActiveProceduresOverlay />
 
       <RenderBudgetHint visibleCount={visibleProcedures.length} />
diff --git a/src/index.css b/src/index.css
index 125a3b8..37e50c8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -41,6 +41,24 @@
   box-sizing: border-box;
 }
 
+/* ── Mobile bottom-sheet inset ───────────────────────────────────────────── */
+/* On phones (<=640px, the PANE_OVERLAY_BREAKPOINT_PX / deriveMode breakpoint)
+   the sidebar becomes a bottom sheet that peeks 44px above the bottom edge
+   (Sidebar.module.css .sheet). Bottom-anchored map overlays add
+   --map-bottom-inset to their offset so nothing hides behind the drawer. */
+:root {
+  --map-bottom-inset: 0px;
+}
+@media (max-width: 640px) {
+  :root {
+    --map-bottom-inset: 44px;
+  }
+  /* Lift the mapbox NavigationControl cluster above the peeking bottom sheet. */
+  .mapboxgl-ctrl-bottom-right {
+    bottom: var(--map-bottom-inset);
+  }
+}
+
 html, body, #root {
   margin: 0;
   padding: 0;