updated the ui for the mobile view

src/pages/nearle/dispatch/Dispatch.css

@@ -9244,6 +9244,39 @@
   padding: 2px 8px;
 }
 
+/* ============================================================
+   Compare data panel — mobile layout (gated by the cdp-is-mobile
+   class added in CompareDataPanel.js when viewport < md). Desktop
+   (>= md) renders without this class, so nothing here applies.
+   Only stacking / wrapping — no behaviour, colours, or content
+   change. The panel occupies the full-width compare column on
+   phones; the side-by-side clock and stat grids stack vertically
+   and the chip rows are allowed to wrap so nothing overflows.
+   ============================================================ */
+.dispatch-container .compare-data-panel.cdp-is-mobile {
+  border-radius: 0;
+}
+
+/* 3-column clock (First | duration | Last) → single column stack. */
+.dispatch-container .compare-data-panel.cdp-is-mobile .cdp-timing-clock {
+  grid-template-columns: 1fr;
+  gap: 14px;
+}
+
+/* The center track is horizontal between two side columns on desktop;
+   give it a sane height when it becomes a full-width stacked row. */
+.dispatch-container .compare-data-panel.cdp-is-mobile .cdp-clock-track {
+  min-width: 0;
+  height: 48px;
+}
+
+/* Timing stats (avg/stop + avg speed) → stack instead of side by side.
+   (The chip rows — highlight-meta / dev-meta / step-deltas / trip-stats —
+   already carry flex-wrap on desktop, so no extra wrap rules are needed.) */
+.dispatch-container .compare-data-panel.cdp-is-mobile .cdp-timing-stats {
+  grid-template-columns: 1fr;
+}
+
 /* Sidebar Rider Card Est. Meters badge */
 .dispatch-container .rcard-est-meters {
   display: inline-flex;
@@ -10691,4 +10724,82 @@
   color: #b45309;
   font-weight: 600;
   font-size: 10.5px;
+}
+
+/* =========================================================================
+   Mobile / app-like layout (≤ 768px). Purely a LAYOUT pass — no behaviour
+   changes. On phones the side-by-side map + sidebar collapses into a single
+   vertical stack: the live map takes the top of the screen full-width, and
+   the rider/batch sidebar flows below it full-width and scrolls. Desktop
+   (≥ md) is untouched; every rule here is gated inside this media query.
+   ========================================================================= */
+@media (max-width: 768px) {
+  /* The standalone page un-does MainCard's 24px padding via negative margin
+     + 100vw-ish sizing; keep that, just allow the inner body to grow with
+     its stacked children instead of being clipped to a single row height. */
+  .dispatch-container {
+    height: auto;
+    min-height: calc(100vh - 88px);
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  /* Stack map (first) over sidebar (second). #body is a flex row on desktop;
+     flip it to a column so the children lay out vertically. */
+  .dispatch-container #body {
+    flex-direction: column;
+    overflow: visible;
+  }
+
+  /* Map: full-width, fixed viewport-relative height so Leaflet has an
+     explicit box to size its canvas against. Order it first. */
+  .dispatch-container #map-wrap,
+  .dispatch-container #map-wrap.compare-split {
+    order: 1;
+    flex: 0 0 auto;
+    width: 100%;
+    min-width: 0;
+    height: 48vh;
+    min-height: 320px;
+    margin-right: 0;
+    border-radius: 0;
+  }
+
+  /* Sidebar: full-width below the map, natural height, internal scroll.
+     Force it visible even if the collapse state is set (the horizontal
+     collapse-to-width:0 animation is meaningless when stacked). */
+  .dispatch-container #sidebar,
+  .dispatch-container #body.sidebar-collapsed #sidebar {
+    order: 2;
+    width: 100%;
+    flex: 1 1 auto;
+    flex-basis: auto;
+    min-width: 0;
+    max-height: none;
+    border-right: 0;
+    border-top: 1px solid var(--border);
+    border-right-color: var(--border);
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* The collapse peek-tab is anchored to a left:Npx column edge that no
+     longer exists once stacked — hide it so it doesn't float over the map. */
+  .dispatch-container .sidebar-toggle-tab {
+    display: none;
+  }
+
+  /* Header — let it wrap cleanly instead of overflowing a fixed-height row. */
+  .dispatch-container #hdr {
+    height: auto;
+    min-height: 42px;
+    flex-wrap: wrap;
+    padding: 8px 16px;
+    gap: 8px;
+  }
+
+  /* The BI / analysis view is its own scroll surface — let it grow. */
+  .dispatch-container #dispatch-analysis {
+    overflow-y: visible;
+  }
 }