From 5f1eb30080be5242f794b407bb98571af87d19b5 Mon Sep 17 00:00:00 2001
From: Nico <Nico>
Date: Thu, 4 Jun 2026 17:47:29 -0700
Subject: [PATCH] fix: stabilize map history controls

---
 frontend/src/components/maps/LocationMapToolbar.jsx | 1 +
 frontend/src/styles/pages/LocationMapManager.css    | 5 +++++
 frontend/tests/location-map-manager.spec.ts         | 8 ++++----
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/maps/LocationMapToolbar.jsx b/frontend/src/components/maps/LocationMapToolbar.jsx
index 89e48b2..69f6fea 100644
--- a/frontend/src/components/maps/LocationMapToolbar.jsx
+++ b/frontend/src/components/maps/LocationMapToolbar.jsx
@@ -104,6 +104,7 @@ export default function LocationMapToolbar({
         <div
           className={`location-map-history-buttons ${canUseHistoryControls ? "" : "is-inactive"}`}
           aria-label="Edit history"
+          aria-hidden={!canUseHistoryControls}
         >
           <button
             type="button"
diff --git a/frontend/src/styles/pages/LocationMapManager.css b/frontend/src/styles/pages/LocationMapManager.css
index 8e76f7e..077192d 100644
--- a/frontend/src/styles/pages/LocationMapManager.css
+++ b/frontend/src/styles/pages/LocationMapManager.css
@@ -184,6 +184,11 @@
   gap: 0.3rem;
 }
 
+.location-map-history-buttons.is-inactive {
+  visibility: hidden;
+  pointer-events: none;
+}
+
 .location-map-history-buttons button {
   min-width: 40px;
   padding-inline: 0.55rem;
diff --git a/frontend/tests/location-map-manager.spec.ts b/frontend/tests/location-map-manager.spec.ts
index a7c2a69..d3d4a57 100644
--- a/frontend/tests/location-map-manager.spec.ts
+++ b/frontend/tests/location-map-manager.spec.ts
@@ -1391,15 +1391,15 @@ test("mobile keeps draft preview status compact in the topbar", async ({ page })
   expect(modeBox.width).toBeLessThanOrEqual(126);
   expect(reservedHistoryBox.width).toBeGreaterThanOrEqual(82);
   expect(reservedHistoryBox.x).toBeGreaterThan(modeBox.x + modeBox.width - 1);
-  await expect(historyActions.getByRole("button", { name: "Undo" })).toBeVisible();
-  await expect(historyActions.getByRole("button", { name: "Redo" })).toBeVisible();
-  await expect(historyActions.getByRole("button", { name: "Undo" })).toBeDisabled();
-  await expect(historyActions.getByRole("button", { name: "Redo" })).toBeDisabled();
+  await expect(historyActions).toHaveCSS("visibility", "hidden");
+  await expect(historyActions.locator('button[aria-label="Undo"]')).toBeDisabled();
+  await expect(historyActions.locator('button[aria-label="Redo"]')).toBeDisabled();
   expect(zoomBox.y).toBeLessThan(modeBox.y + modeBox.height);
   expect(zoomBox.x).toBeGreaterThan(reservedHistoryBox.x + reservedHistoryBox.width - 1);
   expect(zoomBox.x + zoomBox.width).toBeLessThanOrEqual(toolbarBox.x + toolbarBox.width + 1);
 
   await page.getByRole("button", { name: "Edit Draft" }).click();
+  await expect(historyActions).toHaveCSS("visibility", "visible");
   await expect(historyActions.getByRole("button", { name: "Undo" })).toBeVisible();
   await expect(historyActions.getByRole("button", { name: "Redo" })).toBeVisible();
   const editToolbarBox = await toolbar.boundingBox();