From 4fd3807ebf2367af0c38475b1349d08bfd713e77 Mon Sep 17 00:00:00 2001
From: Nico <Nico>
Date: Thu, 4 Jun 2026 02:58:26 -0700
Subject: [PATCH] fix: stabilize mobile map toolbar controls

---
 .../src/components/maps/LocationMapToolbar.jsx   | 16 ++++++++++++----
 frontend/src/styles/pages/LocationMapManager.css | 11 +++++++++++
 frontend/tests/location-map-manager.spec.ts      | 14 +++++++++++++-
 3 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/maps/LocationMapToolbar.jsx b/frontend/src/components/maps/LocationMapToolbar.jsx
index 5639b88..21c52f2 100644
--- a/frontend/src/components/maps/LocationMapToolbar.jsx
+++ b/frontend/src/components/maps/LocationMapToolbar.jsx
@@ -20,6 +20,8 @@ export default function LocationMapToolbar({
 }) {
   const isAtMinZoom = zoom <= MIN_MAP_ZOOM;
   const isAtMaxZoom = zoom >= MAX_MAP_ZOOM;
+  const showHistorySlot = canManage && hasAnyMap;
+  const showHistoryControls = mode === "edit" && showHistorySlot;
 
   return (
     <section className="location-map-toolbar" aria-label="Map controls">
@@ -48,21 +50,27 @@ export default function LocationMapToolbar({
             </button>
           ) : null}
         </div>
-        {mode === "edit" && canManage ? (
-          <div className="location-map-history-buttons" aria-label="Edit history">
+        {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={saving || history.length === 0}
+              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={saving || future.length === 0}
+              disabled={!showHistoryControls || saving || future.length === 0}
               aria-label="Redo"
+              tabIndex={showHistoryControls ? undefined : -1}
             >
               <span aria-hidden="true">&#8631;</span>
             </button>
diff --git a/frontend/src/styles/pages/LocationMapManager.css b/frontend/src/styles/pages/LocationMapManager.css
index 915143a..e985f36 100644
--- a/frontend/src/styles/pages/LocationMapManager.css
+++ b/frontend/src/styles/pages/LocationMapManager.css
@@ -178,6 +178,10 @@
   gap: 0.3rem;
 }
 
+.location-map-history-buttons.is-reserved {
+  display: none;
+}
+
 .location-map-history-buttons button {
   min-width: 40px;
   padding-inline: 0.55rem;
@@ -843,6 +847,13 @@
   .location-map-history-buttons {
     flex: 0 0 auto;
     gap: 0.12rem;
+    width: 82px;
+  }
+
+  .location-map-history-buttons.is-reserved {
+    display: flex;
+    visibility: hidden;
+    pointer-events: none;
   }
 
   .location-map-history-buttons button {
diff --git a/frontend/tests/location-map-manager.spec.ts b/frontend/tests/location-map-manager.spec.ts
index f83e16c..aba3a37 100644
--- a/frontend/tests/location-map-manager.spec.ts
+++ b/frontend/tests/location-map-manager.spec.ts
@@ -572,6 +572,7 @@ test("mobile keeps draft preview status compact in the topbar", async ({ page })
   const backButton = page.getByRole("button", { name: "Back to grocery list" });
   const status = page.locator(".location-map-status");
   const toolbar = page.locator(".location-map-toolbar");
+  const modeGroup = page.locator(".location-map-mode-group");
   const modeButtons = page.locator(".location-map-mode-buttons");
   const zoomControls = page.locator(".location-map-zoom-controls");
   await expect(status).toHaveText("Draft Preview");
@@ -581,6 +582,7 @@ test("mobile keeps draft preview status compact in the topbar", async ({ page })
   const titleBox = await page.locator(".location-map-title").boundingBox();
   const statusBox = await status.boundingBox();
   const toolbarBox = await toolbar.boundingBox();
+  const modeGroupBox = await modeGroup.boundingBox();
   const modeBox = await modeButtons.boundingBox();
   const zoomBox = await zoomControls.boundingBox();
   expect(topbarBox).not.toBeNull();
@@ -588,9 +590,10 @@ test("mobile keeps draft preview status compact in the topbar", async ({ page })
   expect(titleBox).not.toBeNull();
   expect(statusBox).not.toBeNull();
   expect(toolbarBox).not.toBeNull();
+  expect(modeGroupBox).not.toBeNull();
   expect(modeBox).not.toBeNull();
   expect(zoomBox).not.toBeNull();
-  if (!topbarBox || !backButtonBox || !titleBox || !statusBox || !toolbarBox || !modeBox || !zoomBox) {
+  if (!topbarBox || !backButtonBox || !titleBox || !statusBox || !toolbarBox || !modeGroupBox || !modeBox || !zoomBox) {
     throw new Error("Mobile map controls layout was not measurable");
   }
   expect(topbarBox.height).toBeLessThanOrEqual(66);
@@ -599,6 +602,15 @@ test("mobile keeps draft preview status compact in the topbar", async ({ page })
   expect(statusBox.x).toBeGreaterThan(titleBox.x);
   expect(toolbarBox.height).toBeLessThanOrEqual(64);
   expect(zoomBox.y).toBeLessThan(modeBox.y + modeBox.height);
+
+  await page.getByRole("button", { name: "Edit Draft" }).click();
+  const historyActions = page.locator(".location-map-history-buttons");
+  await expect(historyActions.getByRole("button", { name: "Undo" })).toBeVisible();
+  await expect(historyActions.getByRole("button", { name: "Redo" })).toBeVisible();
+  const editModeGroupBox = await modeGroup.boundingBox();
+  expect(editModeGroupBox).not.toBeNull();
+  if (!editModeGroupBox) throw new Error("Mobile edit controls layout was not measurable");
+  expect(Math.abs(editModeGroupBox.width - modeGroupBox.width)).toBeLessThanOrEqual(1);
 });
 
 test("admin selecting an object does not mark a draft dirty until it changes", async ({ page }) => {