From c945a71f452e580eedbf1a8c69d31f2b0906cd45 Mon Sep 17 00:00:00 2001
From: Nico <Nico>
Date: Thu, 4 Jun 2026 03:55:53 -0700
Subject: [PATCH] fix: stabilize mobile map toolbar widths

---
 .../components/maps/LocationMapToolbar.jsx    | 101 +++++++++---------
 .../src/styles/pages/LocationMapManager.css   |  30 ++++--
 frontend/tests/location-map-manager.spec.ts   |  13 ++-
 3 files changed, 84 insertions(+), 60 deletions(-)

diff --git a/frontend/src/components/maps/LocationMapToolbar.jsx b/frontend/src/components/maps/LocationMapToolbar.jsx
index 61b2986..12e5397 100644
--- a/frontend/src/components/maps/LocationMapToolbar.jsx
+++ b/frontend/src/components/maps/LocationMapToolbar.jsx
@@ -24,7 +24,10 @@ export default function LocationMapToolbar({
   const showHistoryControls = mode === "edit" && showHistorySlot;
 
   return (
-    <section className="location-map-toolbar" aria-label="Map controls">
+    <section
+      className={`location-map-toolbar ${showHistorySlot ? "has-history-slot" : ""}`}
+      aria-label="Map controls"
+    >
       <div className="location-map-mode-group">
         <div className="location-map-mode-buttons" aria-label="Map mode">
           <button
@@ -50,55 +53,55 @@ export default function LocationMapToolbar({
             </button>
           ) : null}
         </div>
-        {showHistorySlot ? (
-          <div
-            className={`location-map-history-buttons ${showHistoryControls ? "" : "is-reserved"}`}
-            aria-label={showHistoryControls ? "Edit history" : undefined}
-            aria-hidden={showHistoryControls ? undefined : "true"}
-          >
-            <button
-              type="button"
-              onClick={onUndo}
-              disabled={!showHistoryControls || saving || history.length === 0}
-              aria-label="Undo"
-              tabIndex={showHistoryControls ? undefined : -1}
-            >
-              <span aria-hidden="true">&#8630;</span>
-            </button>
-            <button
-              type="button"
-              onClick={onRedo}
-              disabled={!showHistoryControls || saving || future.length === 0}
-              aria-label="Redo"
-              tabIndex={showHistoryControls ? undefined : -1}
-            >
-              <span aria-hidden="true">&#8631;</span>
-            </button>
-          </div>
-        ) : null}
-        {mode === "edit" && canManage ? (
-          <div className="location-map-tool-buttons" aria-label="Edit tool">
-            <button
-              type="button"
-              className={editorTool === "pan" ? "active is-pan" : ""}
-              onClick={onPanMode}
-              disabled={saving}
-              aria-pressed={editorTool === "pan"}
-            >
-              Move Map
-            </button>
-            <button
-              type="button"
-              className={editorTool === "edit" ? "active is-edit" : ""}
-              onClick={onEditObjects}
-              disabled={saving}
-              aria-pressed={editorTool === "edit"}
-            >
-              Edit Areas
-            </button>
-          </div>
-        ) : null}
       </div>
+      {showHistorySlot ? (
+        <div
+          className={`location-map-history-buttons ${showHistoryControls ? "" : "is-reserved"}`}
+          aria-label={showHistoryControls ? "Edit history" : undefined}
+          aria-hidden={showHistoryControls ? undefined : "true"}
+        >
+          <button
+            type="button"
+            onClick={onUndo}
+            disabled={!showHistoryControls || saving || history.length === 0}
+            aria-label="Undo"
+            tabIndex={showHistoryControls ? undefined : -1}
+          >
+            <span aria-hidden="true">&#8630;</span>
+          </button>
+          <button
+            type="button"
+            onClick={onRedo}
+            disabled={!showHistoryControls || saving || future.length === 0}
+            aria-label="Redo"
+            tabIndex={showHistoryControls ? undefined : -1}
+          >
+            <span aria-hidden="true">&#8631;</span>
+          </button>
+        </div>
+      ) : null}
+      {mode === "edit" && canManage ? (
+        <div className="location-map-tool-buttons" aria-label="Edit tool">
+          <button
+            type="button"
+            className={editorTool === "pan" ? "active is-pan" : ""}
+            onClick={onPanMode}
+            disabled={saving}
+            aria-pressed={editorTool === "pan"}
+          >
+            Move Map
+          </button>
+          <button
+            type="button"
+            className={editorTool === "edit" ? "active is-edit" : ""}
+            onClick={onEditObjects}
+            disabled={saving}
+            aria-pressed={editorTool === "edit"}
+          >
+            Edit Areas
+          </button>
+        </div>
+      ) : null}
 
       <div className="location-map-zoom-controls" aria-label="Zoom controls">
         <button
diff --git a/frontend/src/styles/pages/LocationMapManager.css b/frontend/src/styles/pages/LocationMapManager.css
index e6785f1..1f102f6 100644
--- a/frontend/src/styles/pages/LocationMapManager.css
+++ b/frontend/src/styles/pages/LocationMapManager.css
@@ -107,7 +107,6 @@
 
 .location-map-toolbar {
   display: flex;
-  justify-content: space-between;
   align-items: flex-start;
   flex-wrap: wrap;
   gap: 0.75rem;
@@ -119,8 +118,6 @@
 .location-map-mode-group {
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
-  gap: 0.55rem;
   min-width: 0;
 }
 
@@ -225,6 +222,10 @@
   text-align: center;
 }
 
+.location-map-zoom-controls {
+  margin-left: auto;
+}
+
 .location-map-label-short {
   display: none;
 }
@@ -839,21 +840,24 @@
   }
 
   .location-map-toolbar {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
     align-items: center;
-    flex-wrap: nowrap;
     gap: 0.15rem;
     padding: 0.35rem 0.25rem;
   }
 
+  .location-map-toolbar.has-history-slot {
+    grid-template-columns: minmax(0, 1fr) 82px auto;
+  }
+
   .location-map-mode-group {
-    flex: 0 0 auto;
+    grid-column: 1;
     min-width: 0;
-    flex-wrap: nowrap;
-    gap: 0.15rem;
   }
 
   .location-map-mode-buttons {
-    flex: 0 0 120px;
+    width: 100%;
     min-width: 0;
     padding: 0.18rem;
   }
@@ -874,7 +878,7 @@
   }
 
   .location-map-history-buttons {
-    flex: 0 0 auto;
+    grid-column: 2;
     gap: 0.12rem;
     width: 82px;
   }
@@ -892,8 +896,14 @@
   }
 
   .location-map-zoom-controls {
-    flex: 0 0 auto;
+    grid-column: 2;
     gap: 0.12rem;
+    margin-left: 0;
+    justify-self: end;
+  }
+
+  .location-map-toolbar.has-history-slot .location-map-zoom-controls {
+    grid-column: 3;
   }
 
   .location-map-zoom-controls button {
diff --git a/frontend/tests/location-map-manager.spec.ts b/frontend/tests/location-map-manager.spec.ts
index 9c4a90e..8e5ef12 100644
--- a/frontend/tests/location-map-manager.spec.ts
+++ b/frontend/tests/location-map-manager.spec.ts
@@ -608,9 +608,20 @@ test("mobile keeps draft preview status compact in the topbar", async ({ page })
   await expect(historyActions.getByRole("button", { name: "Undo" })).toBeVisible();
   await expect(historyActions.getByRole("button", { name: "Redo" })).toBeVisible();
   const editModeGroupBox = await modeGroup.boundingBox();
+  const editModeBox = await modeButtons.boundingBox();
+  const editHistoryBox = await historyActions.boundingBox();
+  const editZoomBox = await zoomControls.boundingBox();
   expect(editModeGroupBox).not.toBeNull();
-  if (!editModeGroupBox) throw new Error("Mobile edit controls layout was not measurable");
+  expect(editModeBox).not.toBeNull();
+  expect(editHistoryBox).not.toBeNull();
+  expect(editZoomBox).not.toBeNull();
+  if (!editModeGroupBox || !editModeBox || !editHistoryBox || !editZoomBox) {
+    throw new Error("Mobile edit controls layout was not measurable");
+  }
   expect(Math.abs(editModeGroupBox.width - modeGroupBox.width)).toBeLessThanOrEqual(1);
+  expect(Math.abs(editModeBox.width - modeBox.width)).toBeLessThanOrEqual(1);
+  expect(editHistoryBox.x).toBeGreaterThan(editModeBox.x + editModeBox.width);
+  expect(editZoomBox.x).toBeGreaterThan(editHistoryBox.x + editHistoryBox.width);
 });
 
 test("admin selecting an object does not mark a draft dirty until it changes", async ({ page }) => {