From 97a502362d571f320543c84b7d0b765f142c2f1d Mon Sep 17 00:00:00 2001
From: Nico <Nico>
Date: Thu, 4 Jun 2026 05:52:53 -0700
Subject: [PATCH] fix: reserve mobile map history slot

---
 .../src/styles/pages/LocationMapManager.css    |  3 ++-
 frontend/tests/location-map-manager.spec.ts    | 18 ++++++++++++++++--
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/frontend/src/styles/pages/LocationMapManager.css b/frontend/src/styles/pages/LocationMapManager.css
index 109cc79..46fe2bc 100644
--- a/frontend/src/styles/pages/LocationMapManager.css
+++ b/frontend/src/styles/pages/LocationMapManager.css
@@ -181,7 +181,8 @@
 }
 
 .location-map-history-buttons.is-reserved {
-  display: none;
+  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 9947644..afbe2d3 100644
--- a/frontend/tests/location-map-manager.spec.ts
+++ b/frontend/tests/location-map-manager.spec.ts
@@ -745,6 +745,7 @@ test("mobile keeps draft preview status compact in the topbar", async ({ page })
   const toolbar = page.locator(".location-map-toolbar");
   const modeGroup = page.locator(".location-map-mode-group");
   const modeButtons = page.locator(".location-map-mode-buttons");
+  const historyActions = page.locator(".location-map-history-buttons");
   const zoomControls = page.locator(".location-map-zoom-controls");
   await expect(status).toHaveText("Draft Preview");
 
@@ -755,6 +756,7 @@ test("mobile keeps draft preview status compact in the topbar", async ({ page })
   const toolbarBox = await toolbar.boundingBox();
   const modeGroupBox = await modeGroup.boundingBox();
   const modeBox = await modeButtons.boundingBox();
+  const reservedHistoryBox = await historyActions.boundingBox();
   const zoomBox = await zoomControls.boundingBox();
   expect(topbarBox).not.toBeNull();
   expect(backButtonBox).not.toBeNull();
@@ -763,8 +765,19 @@ test("mobile keeps draft preview status compact in the topbar", async ({ page })
   expect(toolbarBox).not.toBeNull();
   expect(modeGroupBox).not.toBeNull();
   expect(modeBox).not.toBeNull();
+  expect(reservedHistoryBox).not.toBeNull();
   expect(zoomBox).not.toBeNull();
-  if (!topbarBox || !backButtonBox || !titleBox || !statusBox || !toolbarBox || !modeGroupBox || !modeBox || !zoomBox) {
+  if (
+    !topbarBox ||
+    !backButtonBox ||
+    !titleBox ||
+    !statusBox ||
+    !toolbarBox ||
+    !modeGroupBox ||
+    !modeBox ||
+    !reservedHistoryBox ||
+    !zoomBox
+  ) {
     throw new Error("Mobile map controls layout was not measurable");
   }
   expect(topbarBox.height).toBeLessThanOrEqual(66);
@@ -773,11 +786,11 @@ test("mobile keeps draft preview status compact in the topbar", async ({ page })
   expect(statusBox.x).toBeGreaterThan(titleBox.x);
   expect(toolbarBox.height).toBeLessThanOrEqual(64);
   expect(modeBox.width).toBeLessThanOrEqual(150);
+  expect(reservedHistoryBox.width).toBeGreaterThanOrEqual(70);
   expect(zoomBox.y).toBeLessThan(modeBox.y + modeBox.height);
   expect(zoomBox.x + zoomBox.width).toBeLessThanOrEqual(toolbarBox.x + toolbarBox.width + 1);
 
   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 editToolbarBox = await toolbar.boundingBox();
@@ -796,6 +809,7 @@ test("mobile keeps draft preview status compact in the topbar", async ({ page })
   expect(Math.abs(editModeBox.x - modeBox.x)).toBeLessThanOrEqual(1);
   expect(Math.abs(editModeGroupBox.width - modeGroupBox.width)).toBeLessThanOrEqual(1);
   expect(Math.abs(editModeBox.width - modeBox.width)).toBeLessThanOrEqual(1);
+  expect(Math.abs(editHistoryBox.width - reservedHistoryBox.width)).toBeLessThanOrEqual(1);
   expect(editHistoryBox.x).toBeGreaterThan(editModeBox.x + editModeBox.width);
   expect(editZoomBox.x).toBeGreaterThan(editHistoryBox.x + editHistoryBox.width);
   expect(editZoomBox.x + editZoomBox.width).toBeLessThanOrEqual(editToolbarBox.x + editToolbarBox.width + 1);