Mobile top-bar wordmark, bottom-sheet-aware overlays, relocated axis zoom

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);

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;

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>

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} />

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;