From 4c753579dd3b664cf1edfcb0372c5504d1131a02 Mon Sep 17 00:00:00 2001
From: Nico <Nico>
Date: Thu, 4 Jun 2026 20:54:53 -0700
Subject: [PATCH] fix: stabilize map toolbar controls

---
 .../maps/LocationMapBottomSheetSections.jsx   |  6 ++-
 .../components/maps/LocationMapToolbar.jsx    | 10 ++---
 .../src/styles/pages/LocationMapManager.css   | 43 ++++++++++++++----
 frontend/tests/location-map-manager.spec.ts   | 45 +++++++++----------
 4 files changed, 64 insertions(+), 40 deletions(-)

diff --git a/frontend/src/components/maps/LocationMapBottomSheetSections.jsx b/frontend/src/components/maps/LocationMapBottomSheetSections.jsx
index 19b3ee5..7251555 100644
--- a/frontend/src/components/maps/LocationMapBottomSheetSections.jsx
+++ b/frontend/src/components/maps/LocationMapBottomSheetSections.jsx
@@ -87,7 +87,11 @@ export function LocationMapLayerPanel({ filters, setFilters }) {
               setFilters((current) => ({ ...current, [key]: !current[key] }))
             }
           >
-            {label}
+            <span
+              className={`location-map-layer-state ${filters[key] ? "is-on" : ""}`}
+              aria-hidden="true"
+            />
+            <span className="location-map-layer-label">{label}</span>
           </button>
         ))}
       </div>
diff --git a/frontend/src/components/maps/LocationMapToolbar.jsx b/frontend/src/components/maps/LocationMapToolbar.jsx
index 69f6fea..7e546ec 100644
--- a/frontend/src/components/maps/LocationMapToolbar.jsx
+++ b/frontend/src/components/maps/LocationMapToolbar.jsx
@@ -66,12 +66,11 @@ export default function LocationMapToolbar({
 }) {
   const isAtMinZoom = zoom <= MIN_MAP_ZOOM;
   const isAtMaxZoom = zoom >= MAX_MAP_ZOOM;
-  const showHistorySlot = canManage && hasAnyMap;
-  const canUseHistoryControls = mode === "edit" && showHistorySlot;
+  const canUseHistoryControls = mode === "edit" && canManage && hasAnyMap;
 
   return (
     <section
-      className={`location-map-toolbar ${showHistorySlot ? "has-history-slot" : ""}`}
+      className={`location-map-toolbar ${canUseHistoryControls ? "has-history-slot" : ""}`}
       aria-label="Map controls"
     >
       <div className="location-map-mode-group">
@@ -100,11 +99,10 @@ export default function LocationMapToolbar({
           ) : null}
         </div>
       </div>
-      {showHistorySlot ? (
+      {canUseHistoryControls ? (
         <div
-          className={`location-map-history-buttons ${canUseHistoryControls ? "" : "is-inactive"}`}
+          className="location-map-history-buttons"
           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 101302f..8baf10d 100644
--- a/frontend/src/styles/pages/LocationMapManager.css
+++ b/frontend/src/styles/pages/LocationMapManager.css
@@ -200,11 +200,6 @@
   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;
@@ -600,7 +595,7 @@
   min-height: 40px;
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   gap: 0.35rem;
   padding: 0.35rem 0.45rem;
   border: 1px solid var(--color-border-light);
@@ -612,6 +607,31 @@
   cursor: pointer;
 }
 
+.location-map-layer-state {
+  flex: 0 0 auto;
+  width: 0.85rem;
+  height: 0.85rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(148, 163, 184, 0.68);
+  border-radius: 999px;
+  background: rgba(2, 6, 23, 0.3);
+}
+
+.location-map-layer-state.is-on {
+  border-color: rgba(96, 165, 250, 0.95);
+  background: var(--color-primary);
+  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.16);
+}
+
+.location-map-layer-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .location-map-display-controls button.active {
   border-color: rgba(96, 165, 250, 0.76);
   background: rgba(59, 130, 246, 0.32);
@@ -1002,7 +1022,7 @@
 
 @media (max-width: 839px) {
   .location-map-toolbar {
-    --location-map-mode-slot: clamp(132px, 24vw, 188px);
+    --location-map-mode-slot: clamp(168px, 24vw, 188px);
     --location-map-history-slot: 84px;
     display: grid;
     grid-template-columns: var(--location-map-mode-slot) minmax(0, 1fr);
@@ -1150,7 +1170,7 @@
   }
 
   .location-map-toolbar {
-    --location-map-mode-slot: 132px;
+    --location-map-mode-slot: 168px;
     --location-map-history-slot: 84px;
     column-gap: 0.15rem;
     row-gap: 0.35rem;
@@ -1169,6 +1189,13 @@
     min-width: 28px;
   }
 
+  .location-map-toolbar.has-history-slot .location-map-zoom-controls {
+    grid-column: 1 / -1;
+    width: 100%;
+    justify-self: stretch;
+    justify-content: space-between;
+  }
+
   .location-map-display-controls {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
diff --git a/frontend/tests/location-map-manager.spec.ts b/frontend/tests/location-map-manager.spec.ts
index b60ce99..60dab4c 100644
--- a/frontend/tests/location-map-manager.spec.ts
+++ b/frontend/tests/location-map-manager.spec.ts
@@ -1409,7 +1409,6 @@ test("mobile keeps viewing draft 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();
@@ -1418,7 +1417,6 @@ test("mobile keeps viewing draft 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 ||
@@ -1428,7 +1426,6 @@ test("mobile keeps viewing draft status compact in the topbar", async ({ page })
     !toolbarBox ||
     !modeGroupBox ||
     !modeBox ||
-    !reservedHistoryBox ||
     !zoomBox
   ) {
     throw new Error("Mobile map controls layout was not measurable");
@@ -1440,19 +1437,15 @@ test("mobile keeps viewing draft status compact in the topbar", async ({ page })
   expect(statusBox.y).toBeLessThan(titleBox.y + titleBox.height);
   expect(statusBox.x).toBeGreaterThan(titleBox.x);
   expect(toolbarBox.height).toBeLessThanOrEqual(64);
-  expect(modeBox.width).toBeGreaterThanOrEqual(130);
-  expect(modeBox.width).toBeLessThanOrEqual(136);
-  expect(reservedHistoryBox.width).toBeGreaterThanOrEqual(82);
-  expect(reservedHistoryBox.x).toBeGreaterThan(modeBox.x + modeBox.width - 1);
-  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(modeBox.width).toBeGreaterThanOrEqual(166);
+  expect(modeBox.width).toBeLessThanOrEqual(172);
+  await expect(historyActions).toHaveCount(0);
   expect(zoomBox.y).toBeLessThan(modeBox.y + modeBox.height);
-  expect(zoomBox.x).toBeGreaterThan(reservedHistoryBox.x + reservedHistoryBox.width - 1);
+  expect(zoomBox.x).toBeGreaterThan(modeBox.x + modeBox.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).toHaveCount(1);
   await expect(historyActions.getByRole("button", { name: "Undo" })).toBeVisible();
   await expect(historyActions.getByRole("button", { name: "Redo" })).toBeVisible();
   const editToolbarBox = await toolbar.boundingBox();
@@ -1471,11 +1464,13 @@ test("mobile keeps viewing draft 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(editModeBox.width).toBeGreaterThanOrEqual(130);
-  expect(editModeBox.width).toBeLessThanOrEqual(136);
-  expect(Math.abs(editHistoryBox.width - reservedHistoryBox.width)).toBeLessThanOrEqual(1);
+  expect(editModeBox.width).toBeGreaterThanOrEqual(166);
+  expect(editModeBox.width).toBeLessThanOrEqual(172);
+  expect(editHistoryBox.width).toBeGreaterThanOrEqual(82);
   expect(editHistoryBox.x).toBeGreaterThan(editModeBox.x + editModeBox.width);
-  expect(editZoomBox.x).toBeGreaterThan(editHistoryBox.x + editHistoryBox.width);
+  expect(editHistoryBox.x + editHistoryBox.width).toBeLessThanOrEqual(editToolbarBox.x + editToolbarBox.width + 1);
+  expect(editZoomBox.y).toBeGreaterThan(editModeBox.y + editModeBox.height - 1);
+  expect(editZoomBox.x).toBeGreaterThanOrEqual(editToolbarBox.x);
   expect(editZoomBox.x + editZoomBox.width).toBeLessThanOrEqual(editToolbarBox.x + editToolbarBox.width + 1);
 });
 
@@ -1531,8 +1526,8 @@ test("narrow mobile toolbar keeps map controls tappable without overflow", async
 
   expect(toolbarBox.x).toBeGreaterThanOrEqual(0);
   expect(toolbarBox.x + toolbarBox.width).toBeLessThanOrEqual(361);
-  expect(modeBox.width).toBeGreaterThanOrEqual(130);
-  expect(modeBox.width).toBeLessThanOrEqual(136);
+  expect(modeBox.width).toBeGreaterThanOrEqual(166);
+  expect(modeBox.width).toBeLessThanOrEqual(172);
   expect(modeBox.x + modeBox.width).toBeLessThanOrEqual(historyBox.x);
   expect(zoomBox.y).toBeGreaterThan(modeBox.y + modeBox.height - 1);
   expect(zoomBox.x).toBeGreaterThanOrEqual(toolbarBox.x);
@@ -2708,11 +2703,14 @@ test("viewer wraps long zone labels and keeps item counts visible", async ({ pag
 
   await page.getByRole("button", { name: "Layers" }).click();
   const labelsToggle = page.getByRole("button", { name: "Labels" });
+  await expect(page.locator(".location-map-display-controls .location-map-layer-state")).toHaveCount(8);
   await expect(labelsToggle).toHaveAttribute("aria-pressed", "true");
+  await expect(labelsToggle.locator(".location-map-layer-state.is-on")).toHaveCount(1);
   await expect(page.getByRole("button", { name: "Bought" })).toBeVisible();
   await expect(page.getByRole("button", { name: "Done" })).toHaveCount(0);
   await labelsToggle.click();
   await expect(labelsToggle).toHaveAttribute("aria-pressed", "false");
+  await expect(labelsToggle.locator(".location-map-layer-state.is-on")).toHaveCount(0);
   await expect(page.getByRole("button", { name: "Layers, 1 changed" })).toBeVisible();
   await expect(produceArea.locator(".location-map-label")).toHaveCount(0);
   await expect(produceArea.locator(".location-map-count")).toHaveText("2 items");
@@ -3926,22 +3924,19 @@ test("compact tablet map starts fitted on first load", async ({ page }) => {
   const historyActions = page.locator(".location-map-history-buttons");
   const zoomControls = page.locator(".location-map-zoom-controls");
   const viewModeBox = await modeButtons.boundingBox();
-  const reservedHistoryBox = await historyActions.boundingBox();
   const viewZoomBox = await zoomControls.boundingBox();
   expect(viewModeBox).not.toBeNull();
-  expect(reservedHistoryBox).not.toBeNull();
   expect(viewZoomBox).not.toBeNull();
-  if (!viewModeBox || !reservedHistoryBox || !viewZoomBox) {
+  if (!viewModeBox || !viewZoomBox) {
     throw new Error("Compact tablet toolbar layout was not measurable");
   }
   expect(viewModeBox.width).toBeGreaterThanOrEqual(180);
   expect(viewModeBox.width).toBeLessThanOrEqual(190);
-  await expect(historyActions).toHaveCSS("visibility", "hidden");
-  expect(reservedHistoryBox.x).toBeGreaterThan(viewModeBox.x + viewModeBox.width - 1);
-  expect(viewZoomBox.x).toBeGreaterThan(reservedHistoryBox.x + reservedHistoryBox.width - 1);
+  await expect(historyActions).toHaveCount(0);
+  expect(viewZoomBox.x).toBeGreaterThan(viewModeBox.x + viewModeBox.width - 1);
 
   await page.getByRole("button", { name: "Edit Draft" }).click();
-  await expect(historyActions).toHaveCSS("visibility", "visible");
+  await expect(historyActions).toHaveCount(1);
   const toolbarBox = await toolbar.boundingBox();
   const editModeBox = await modeButtons.boundingBox();
   const editHistoryBox = await historyActions.boundingBox();