From 26ea7607280963c645db78526ced3decbba65722 Mon Sep 17 00:00:00 2001
From: "Karen A. Salamy" <salamy@mbari.org>
Date: Wed, 11 Feb 2026 12:20:02 -0800
Subject: [PATCH] Fix duplicate Leaflet map controls on Overview and Deployment
 pages

- Map.tsx: Merge duplicate top-left Control blocks (Paintbrush, TrackDB, Layers,
  Center, Fit bounds, Add markers) into a single control group
- index.tsx: Add useIsDesktop so only one layout (desktop or mobile) renders
- [...deployment].tsx: Add useIsDesktop for same layout fix on Deployment page

Prevents duplicate map controls when both desktop and mobile layouts mount.
---
 apps/lrauv-dash2/pages/index.tsx              | 105 +++++----
 .../pages/vehicle/[...deployment].tsx         |  54 +++--
 packages/react-ui/src/Map/Map.tsx             | 211 +++++++++---------
 3 files changed, 198 insertions(+), 172 deletions(-)

diff --git a/apps/lrauv-dash2/pages/index.tsx b/apps/lrauv-dash2/pages/index.tsx
index b79cd7c0..2bcdd6bf 100644
--- a/apps/lrauv-dash2/pages/index.tsx
+++ b/apps/lrauv-dash2/pages/index.tsx
@@ -725,6 +725,19 @@ const OverViewMap: React.FC<{
 
 type MobileView = 'map' | 'list'
 
+// xl breakpoint = 1280px (matches Tailwind xl:)
+const useIsDesktop = () => {
+  const [isDesktop, setIsDesktop] = useState(true)
+  useEffect(() => {
+    const mq = window.matchMedia('(min-width: 1280px)')
+    setIsDesktop(mq.matches)
+    const handler = (e: MediaQueryListEvent) => setIsDesktop(e.matches)
+    mq.addEventListener('change', handler)
+    return () => mq.removeEventListener('change', handler)
+  }, [])
+  return isDesktop
+}
+
 // OverviewPage: NextPage
 const OverviewPage: NextPage = () => {
   const { mapsLoaded } = useGoogleMaps()
@@ -733,6 +746,7 @@ const OverviewPage: NextPage = () => {
   const mounted = useRef(false)
   const { setGlobalModalId } = useGlobalModalId()
   const [mobileView, setMobileView] = useState<MobileView>('map')
+  const isDesktop = useIsDesktop()
 
   useEffect(() => {
     if (!mounted.current) {
@@ -781,54 +795,55 @@ const OverviewPage: NextPage = () => {
                     className={styles.content}
                     data-testid="vehicle-dashboard"
                   >
-                    {/* Desktop view (keep existing Allotment layout) */}
-                    <div className="hidden h-full w-full xl:block">
-                      <Allotment
-                        separator
-                        snap
-                        defaultSizes={[75, 25]}
-                        proportionalLayout
-                      >
-                        <Allotment.Pane>{primarySection}</Allotment.Pane>
-                        <Allotment.Pane priority={LayoutPriority.High}>
-                          {secondarySection}
-                        </Allotment.Pane>
-                      </Allotment>
-                    </div>
-
-                    {/* Mobile view (toggle between map and list) */}
-                    <div className="flex h-full w-full flex-col xl:hidden">
-                      <div className="flex shrink-0 items-center gap-2 border-b border-slate-200 bg-white px-4 py-2">
-                        <button
-                          type="button"
-                          onClick={() => setMobileView('map')}
-                          className={
-                            mobileView === 'map'
-                              ? 'rounded bg-secondary-300/60 px-3 py-1 text-sm font-bold text-black'
-                              : 'rounded px-3 py-1 text-sm font-bold text-slate-600'
-                          }
-                        >
-                          Map
-                        </button>
-                        <button
-                          type="button"
-                          onClick={() => setMobileView('list')}
-                          className={
-                            mobileView === 'list'
-                              ? 'rounded bg-secondary-300/60 px-3 py-1 text-sm font-bold text-black'
-                              : 'rounded px-3 py-1 text-sm font-bold text-slate-600'
-                          }
+                    {/* Single map instance: render one layout to avoid duplicate controls */}
+                    {isDesktop ? (
+                      <div className="h-full w-full">
+                        <Allotment
+                          separator
+                          snap
+                          defaultSizes={[75, 25]}
+                          proportionalLayout
                         >
-                          Vehicles
-                        </button>
+                          <Allotment.Pane>{primarySection}</Allotment.Pane>
+                          <Allotment.Pane priority={LayoutPriority.High}>
+                            {secondarySection}
+                          </Allotment.Pane>
+                        </Allotment>
                       </div>
-
-                      <div className="min-h-0 flex-1 overflow-hidden">
-                        {mobileView === 'map'
-                          ? primarySection
-                          : secondarySection}
+                    ) : (
+                      <div className="flex h-full w-full flex-col">
+                        <div className="flex shrink-0 items-center gap-2 border-b border-slate-200 bg-white px-4 py-2">
+                          <button
+                            type="button"
+                            onClick={() => setMobileView('map')}
+                            className={
+                              mobileView === 'map'
+                                ? 'rounded bg-secondary-300/60 px-3 py-1 text-sm font-bold text-black'
+                                : 'rounded px-3 py-1 text-sm font-bold text-slate-600'
+                            }
+                          >
+                            Map
+                          </button>
+                          <button
+                            type="button"
+                            onClick={() => setMobileView('list')}
+                            className={
+                              mobileView === 'list'
+                                ? 'rounded bg-secondary-300/60 px-3 py-1 text-sm font-bold text-black'
+                                : 'rounded px-3 py-1 text-sm font-bold text-slate-600'
+                            }
+                          >
+                            Vehicles
+                          </button>
+                        </div>
+
+                        <div className="min-h-0 flex-1 overflow-hidden">
+                          {mobileView === 'map'
+                            ? primarySection
+                            : secondarySection}
+                        </div>
                       </div>
-                    </div>
+                    )}
                   </div>
                 </>
               ) : (
diff --git a/apps/lrauv-dash2/pages/vehicle/[...deployment].tsx b/apps/lrauv-dash2/pages/vehicle/[...deployment].tsx
index bf228d0a..03e753a1 100644
--- a/apps/lrauv-dash2/pages/vehicle/[...deployment].tsx
+++ b/apps/lrauv-dash2/pages/vehicle/[...deployment].tsx
@@ -74,6 +74,18 @@ const DeploymentMap = dynamic(() => import('../../components/DeploymentMap'), {
 type AvailableTab = 'vehicle' | 'depth' | null
 type MobileView = 'main' | 'sidebar'
 
+const useIsDesktop = () => {
+  const [isDesktop, setIsDesktop] = useState(true)
+  useEffect(() => {
+    const mq = window.matchMedia('(min-width: 1280px)')
+    setIsDesktop(mq.matches)
+    const handler = (e: MediaQueryListEvent) => setIsDesktop(e.matches)
+    mq.addEventListener('change', handler)
+    return () => mq.removeEventListener('change', handler)
+  }, [])
+  return isDesktop
+}
+
 const Vehicle: NextPage = () => {
   const { authenticated } = useTethysApiContext()
   const { mapsLoaded } = useGoogleMaps()
@@ -94,6 +106,7 @@ const Vehicle: NextPage = () => {
   }
 
   const [mobileView, setMobileView] = useState<MobileView>('main')
+  const isDesktop = useIsDesktop()
 
   const params = (router.query?.deployment ?? []) as string[]
   const vehicleName = params[0]
@@ -452,27 +465,26 @@ const Vehicle: NextPage = () => {
               authenticated={authenticated}
             />
 
-            {/* Desktop view */}
-            <div className="hidden min-h-0 flex-1 xl:flex">
-              <div className={styles.content}>
-                <Allotment
-                  separator
-                  defaultSizes={[75, 25]}
-                  className="min-h-0"
-                >
-                  <Allotment.Pane minSize={720}>
-                    {primarySection}
-                  </Allotment.Pane>
-                  <Allotment.Pane minSize={512}>
-                    {secondarySection}
-                  </Allotment.Pane>
-                </Allotment>
+            {/* Single map instance: render one layout to avoid duplicate controls */}
+            {isDesktop ? (
+              <div className="min-h-0 flex-1 flex">
+                <div className={styles.content}>
+                  <Allotment
+                    separator
+                    defaultSizes={[75, 25]}
+                    className="min-h-0"
+                  >
+                    <Allotment.Pane minSize={720}>
+                      {primarySection}
+                    </Allotment.Pane>
+                    <Allotment.Pane minSize={512}>
+                      {secondarySection}
+                    </Allotment.Pane>
+                  </Allotment>
+                </div>
               </div>
-            </div>
-
-            {/* Mobile view (toggle between main and sidebar) */}
-            <div className="flex min-h-0 flex-1 xl:hidden">
-              <div className={clsx(styles.content, 'flex-col')}>
+            ) : (
+              <div className="flex min-h-0 flex-1 flex-col">
                 <div className="flex shrink-0 items-center gap-2 border-b border-slate-200 bg-white px-4 py-2">
                   <button
                     type="button"
@@ -504,7 +516,7 @@ const Vehicle: NextPage = () => {
                   {mobileView === 'main' ? primarySection : secondarySection}
                 </div>
               </div>
-            </div>
+            )}
           </Layout>
         </div>
       </SelectedStationsProvider>
diff --git a/packages/react-ui/src/Map/Map.tsx b/packages/react-ui/src/Map/Map.tsx
index 4bd36d2c..4c939282 100644
--- a/packages/react-ui/src/Map/Map.tsx
+++ b/packages/react-ui/src/Map/Map.tsx
@@ -862,7 +862,7 @@ const Map = React.forwardRef<L.Map, MapProps>(
           <MouseCoordinates onRequestDepth={onRequestDepth} />
         </Control>
         {children}
-        {/* TRACKDB/STATIONS CONTROLS - Now in separate Control component */}
+        {/* Single consolidated topleft control: TrackDB/Layers + Center/FitBounds/Markers */}
         <Control position="topleft">
           <Tippy
             content="Edit Vehicle Colors"
@@ -937,116 +937,115 @@ const Map = React.forwardRef<L.Map, MapProps>(
               <span style={{ color: '#FFFFFF' }}>Layers</span>
             </button>
           </Tippy>
-        </Control>
-
-        {/* COORDINATE CONTROLS */}
-        {onRequestCoordinate || onRequestFitBounds || onToggleMarkerMode ? (
-          <Control position="topleft">
-            {onRequestCoordinate && (
-              <>
-                <Tippy
-                  content="Center map on centroid of latest GPS Fix positions"
-                  placement="right-start"
-                  theme="mapBtnTT"
+          {(onRequestCoordinate ||
+            onRequestFitBounds ||
+            onToggleMarkerMode) && (
+            <hr style={{ height: '8pt', visibility: 'hidden' }} />
+          )}
+          {onRequestCoordinate && (
+            <>
+              <Tippy
+                content="Center map on centroid of latest GPS Fix positions"
+                placement="right-start"
+                theme="mapBtnTT"
+              >
+                <button
+                  id="vehicle-center"
+                  className="vehicle-center rounded"
+                  aria-label="Center map on vehicle"
+                  onMouseOver={handleMouseOver}
+                  style={{
+                    position: 'relative',
+                    zIndex: isHovering ? 900 : 10,
+                    border: '0px solid rgba(0,0,0,0.2)',
+                    backgroundClip: 'padding-box',
+                    width: 42,
+                    height: 42,
+                  }}
+                  onClick={onRequestCoordinate}
                 >
-                  <button
-                    id="vehicle-center"
-                    className="vehicle-center rounded"
-                    aria-label="Center map on vehicle"
-                    onMouseOver={handleMouseOver}
-                    style={{
-                      position: 'relative',
-                      zIndex: isHovering ? 900 : 10,
-                      border: '0px solid rgba(0,0,0,0.2)',
-                      backgroundClip: 'padding-box',
-                      width: 42,
-                      height: 42,
-                    }}
-                    onClick={onRequestCoordinate}
-                  >
-                    <FontAwesomeIcon
-                      icon={faArrowsToCircle}
-                      size="2xl"
-                      color="#ffffff"
-                    />
-                  </button>
-                </Tippy>
-                <hr style={{ height: '8pt', visibility: 'hidden' }} />
-              </>
-            )}
+                  <FontAwesomeIcon
+                    icon={faArrowsToCircle}
+                    size="2xl"
+                    color="#ffffff"
+                  />
+                </button>
+              </Tippy>
+              <hr style={{ height: '8pt', visibility: 'hidden' }} />
+            </>
+          )}
 
-            {onRequestFitBounds && (
-              <>
-                <Tippy
-                  content="Zoom out to all available/selected vehicles"
-                  placement="right-start"
-                  theme="mapBtnTT"
+          {onRequestFitBounds && (
+            <>
+              <Tippy
+                content="Zoom out to all available/selected vehicles"
+                placement="right-start"
+                theme="mapBtnTT"
+              >
+                <button
+                  id="allVehicles-center"
+                  className="allVehicles-center rounded"
+                  aria-label="Center map on all vehicles"
+                  onMouseOver={handleMouseOver}
+                  style={{
+                    position: 'relative',
+                    zIndex: isHovering ? 900 : 10,
+                    border: '0px solid rgba(0,0,0,0.2)',
+                    backgroundClip: 'padding-box',
+                    width: 42,
+                    height: 42,
+                  }}
+                  onClick={handleRequestFitBounds}
                 >
-                  <button
-                    id="allVehicles-center"
-                    className="allVehicles-center rounded"
-                    aria-label="Center map on all vehicles"
-                    onMouseOver={handleMouseOver}
-                    style={{
-                      position: 'relative',
-                      zIndex: isHovering ? 900 : 10,
-                      border: '0px solid rgba(0,0,0,0.2)',
-                      backgroundClip: 'padding-box',
-                      width: 42,
-                      height: 42,
-                    }}
-                    onClick={handleRequestFitBounds}
-                  >
-                    <FontAwesomeIcon
-                      icon={faArrowsUpDownLeftRight}
-                      size="2xl"
-                      color="#ffffff"
-                    />
-                  </button>
-                </Tippy>
-                <hr style={{ height: '8pt', visibility: 'hidden' }} />
-              </>
-            )}
+                  <FontAwesomeIcon
+                    icon={faArrowsUpDownLeftRight}
+                    size="2xl"
+                    color="#ffffff"
+                  />
+                </button>
+              </Tippy>
+              <hr style={{ height: '8pt', visibility: 'hidden' }} />
+            </>
+          )}
 
-            {onToggleMarkerMode && (
-              <>
-                <Tippy
-                  content={
-                    isAddingMarkers
-                      ? 'Cancel adding markers'
-                      : 'Add markers to map'
-                  }
-                  placement="right-start"
-                  theme="mapBtnTT"
+          {onToggleMarkerMode && (
+            <>
+              <Tippy
+                content={
+                  isAddingMarkers
+                    ? 'Cancel adding markers'
+                    : 'Add markers to map'
+                }
+                placement="right-start"
+                theme="mapBtnTT"
+              >
+                <button
+                  id="toggle-markers"
+                  className="toggle-markers rounded"
+                  aria-label="Toggle marker mode"
+                  onMouseOver={handleMouseOver}
+                  style={{
+                    position: 'relative',
+                    zIndex: isHovering ? 900 : 10,
+                    border: '0px solid rgba(0,0,0,0.2)',
+                    backgroundClip: 'padding-box',
+                    width: 42,
+                    height: 42,
+                  }}
+                  onClick={handleToggleMarkerMode}
                 >
-                  <button
-                    id="toggle-markers"
-                    className="toggle-markers rounded"
-                    aria-label="Toggle marker mode"
-                    onMouseOver={handleMouseOver}
-                    style={{
-                      position: 'relative',
-                      zIndex: isHovering ? 900 : 10,
-                      border: '0px solid rgba(0,0,0,0.2)',
-                      backgroundClip: 'padding-box',
-                      width: 42,
-                      height: 42,
-                    }}
-                    onClick={handleToggleMarkerMode}
-                  >
-                    <FontAwesomeIcon
-                      icon={faLocationDot}
-                      size="2xl"
-                      className={isAddingMarkers ? 'pulsing-icon' : ''}
-                      color={isAddingMarkers ? '#FF0000' : '#ffffff'}
-                    />
-                  </button>
-                </Tippy>
-                <hr style={{ height: '8pt', visibility: 'hidden' }} />
-              </>
-            )}
-          </Control>
-        ) : null}
+                  <FontAwesomeIcon
+                    icon={faLocationDot}
+                    size="2xl"
+                    className={isAddingMarkers ? 'pulsing-icon' : ''}
+                    color={isAddingMarkers ? '#FF0000' : '#ffffff'}
+                  />
+                </button>
+              </Tippy>
+              <hr style={{ height: '8pt', visibility: 'hidden' }} />
+            </>
+          )}
+        </Control>
 
         {/* MEASUREMENT CONTROLS - In a separate Control component */}
         <Control position="topright">