updated the ui for the mobile view

src/pages/nearle/dispatch/CompareDataPanel.js

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import { useTheme, useMediaQuery } from '@mui/material';
 import {
   MdPublic,
   MdSwapHoriz,
@@ -60,6 +61,13 @@ function CompareDataPanel({
   setExpandedSeqGroups,
   onClose
 }) {
+  // Mobile flag — gates only layout (a className on the root <aside> that a
+  // scoped media-query block in Dispatch.css uses to stack the side-by-side
+  // timing/clock columns vertically and let stat chips wrap). No data,
+  // handler, or derivation behaviour changes on any breakpoint.
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+
   // All derivations live in a single useMemo so the cost of re-running
   // them is paid only when an upstream input actually changes — not on
   // every parent render (e.g. cursor moving over the map, sync toggle
@@ -294,7 +302,10 @@ function CompareDataPanel({
   } = view;
 
   return (
-    <aside id="compare-data-panel" className="compare-data-panel">
+    <aside
+      id="compare-data-panel"
+      className={`compare-data-panel${isMobile ? ' cdp-is-mobile' : ''}`}
+    >
       <div className="cdp-head">
         <div className="cdp-head-title">
           <span