frontend/src/components/maps/LocationMapBottomSheetSections.jsx

@@ -87,11 +87,7 @@ export function LocationMapLayerPanel({ filters, setFilters }) {
               setFilters((current) => ({ ...current, [key]: !current[key] }))
             }
           >
-            <span
+            {label}
-              className={`location-map-layer-state ${filters[key] ? "is-on" : ""}`}
-              aria-hidden="true"
-            />
-            <span className="location-map-layer-label">{label}</span>
           </button>
         ))}
       </div>

frontend/src/components/maps/LocationMapSetupPanel.jsx

@@ -15,11 +15,10 @@ export default function LocationMapSetupPanel({
   const createBlankLabel = savingAction === "create-blank" ? "Creating..." : "Create Blank Map";
   const createZonesButtonLabel = savingAction === "create-zones" ? "Creating..." : createFromZonesLabel;
   const publishLabel = savingAction === "publish" ? "Publishing..." : "Publish";
-  const heading = hasAnyMap ? "Draft Map" : canManage ? "No Map" : "No Published Map";
 
   return (
     <section className="location-map-setup">
-      <h2>{heading}</h2>
+      <h2>{hasAnyMap ? "Draft Map" : "No Map"}</h2>
       {canManage ? (
         <div className="location-map-setup-rows" role="group" aria-label="Map setup details">
           <div className="location-map-setup-row">

frontend/src/components/maps/LocationMapToolbar.jsx

@@ -66,11 +66,12 @@ export default function LocationMapToolbar({
 }) {
   const isAtMinZoom = zoom <= MIN_MAP_ZOOM;
   const isAtMaxZoom = zoom >= MAX_MAP_ZOOM;
-  const canUseHistoryControls = mode === "edit" && canManage && hasAnyMap;
+  const showHistorySlot = canManage && hasAnyMap;
+  const canUseHistoryControls = mode === "edit" && showHistorySlot;
 
   return (
     <section
-      className={`location-map-toolbar ${canUseHistoryControls ? "has-history-slot" : ""}`}
+      className={`location-map-toolbar ${showHistorySlot ? "has-history-slot" : ""}`}
       aria-label="Map controls"
     >
       <div className="location-map-mode-group">
@@ -99,10 +100,11 @@ export default function LocationMapToolbar({
           ) : null}
         </div>
       </div>
-      {canUseHistoryControls ? (
+      {showHistorySlot ? (
         <div
-          className="location-map-history-buttons"
+          className={`location-map-history-buttons ${canUseHistoryControls ? "" : "is-inactive"}`}
           aria-label="Edit history"
+          aria-hidden={!canUseHistoryControls}
         >
           <button
             type="button"

frontend/src/styles/pages/LocationMapManager.css

@@ -200,6 +200,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;
@@ -595,7 +600,7 @@
   min-height: 40px;
   display: flex;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: center;
   gap: 0.35rem;
   padding: 0.35rem 0.45rem;
   border: 1px solid var(--color-border-light);
@@ -607,31 +612,6 @@
   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);
@@ -1022,7 +1002,7 @@
 
 @media (max-width: 839px) {
   .location-map-toolbar {
-    --location-map-mode-slot: clamp(168px, 24vw, 188px);
+    --location-map-mode-slot: clamp(132px, 24vw, 188px);
     --location-map-history-slot: 84px;
     display: grid;
     grid-template-columns: var(--location-map-mode-slot) minmax(0, 1fr);
@@ -1170,7 +1150,7 @@
   }
 
   .location-map-toolbar {
-    --location-map-mode-slot: 168px;
+    --location-map-mode-slot: 132px;
     --location-map-history-slot: 84px;
     column-gap: 0.15rem;
     row-gap: 0.35rem;
@@ -1189,13 +1169,6 @@
     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));
   }

frontend/tests/location-map-manager.spec.ts

@@ -1409,6 +1409,7 @@ 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();
@@ -1417,6 +1418,7 @@ 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 ||
@@ -1426,6 +1428,7 @@ 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");
@@ -1437,15 +1440,19 @@ 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(166);
+  expect(modeBox.width).toBeGreaterThanOrEqual(130);
-  expect(modeBox.width).toBeLessThanOrEqual(172);
+  expect(modeBox.width).toBeLessThanOrEqual(136);
-  await expect(historyActions).toHaveCount(0);
+  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(zoomBox.y).toBeLessThan(modeBox.y + modeBox.height);
-  expect(zoomBox.x).toBeGreaterThan(modeBox.x + modeBox.width - 1);
+  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).toHaveCount(1);
+  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();
@@ -1464,13 +1471,11 @@ 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(166);
+  expect(editModeBox.width).toBeGreaterThanOrEqual(130);
-  expect(editModeBox.width).toBeLessThanOrEqual(172);
+  expect(editModeBox.width).toBeLessThanOrEqual(136);
-  expect(editHistoryBox.width).toBeGreaterThanOrEqual(82);
+  expect(Math.abs(editHistoryBox.width - reservedHistoryBox.width)).toBeLessThanOrEqual(1);
   expect(editHistoryBox.x).toBeGreaterThan(editModeBox.x + editModeBox.width);
-  expect(editHistoryBox.x + editHistoryBox.width).toBeLessThanOrEqual(editToolbarBox.x + editToolbarBox.width + 1);
+  expect(editZoomBox.x).toBeGreaterThan(editHistoryBox.x + editHistoryBox.width);
-  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);
 });
 
@@ -1526,8 +1531,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(166);
+  expect(modeBox.width).toBeGreaterThanOrEqual(130);
-  expect(modeBox.width).toBeLessThanOrEqual(172);
+  expect(modeBox.width).toBeLessThanOrEqual(136);
   expect(modeBox.x + modeBox.width).toBeLessThanOrEqual(historyBox.x);
   expect(zoomBox.y).toBeGreaterThan(modeBox.y + modeBox.height - 1);
   expect(zoomBox.x).toBeGreaterThanOrEqual(toolbarBox.x);
@@ -2703,14 +2708,11 @@ 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");
@@ -3924,19 +3926,22 @@ 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 || !viewZoomBox) {
+  if (!viewModeBox || !reservedHistoryBox || !viewZoomBox) {
     throw new Error("Compact tablet toolbar layout was not measurable");
   }
   expect(viewModeBox.width).toBeGreaterThanOrEqual(180);
   expect(viewModeBox.width).toBeLessThanOrEqual(190);
-  await expect(historyActions).toHaveCount(0);
+  await expect(historyActions).toHaveCSS("visibility", "hidden");
-  expect(viewZoomBox.x).toBeGreaterThan(viewModeBox.x + viewModeBox.width - 1);
+  expect(reservedHistoryBox.x).toBeGreaterThan(viewModeBox.x + viewModeBox.width - 1);
+  expect(viewZoomBox.x).toBeGreaterThan(reservedHistoryBox.x + reservedHistoryBox.width - 1);
 
   await page.getByRole("button", { name: "Edit Draft" }).click();
-  await expect(historyActions).toHaveCount(1);
+  await expect(historyActions).toHaveCSS("visibility", "visible");
   const toolbarBox = await toolbar.boundingBox();
   const editModeBox = await modeButtons.boundingBox();
   const editHistoryBox = await historyActions.boundingBox();
@@ -4283,8 +4288,7 @@ test("members see a clean empty state when no map is published", async ({ page }
 
   await page.goto("/stores/100/locations/10/map");
 
-  await expect(page.getByRole("heading", { name: "No Published Map" })).toBeVisible();
+  await expect(page.getByRole("heading", { name: "No Map" })).toBeVisible();
-  await expect(page.getByRole("heading", { name: "No Map" })).toHaveCount(0);
   await expect(page.getByRole("group", { name: "Map setup details" })).toHaveCount(0);
   await expect(page.getByText("Not published")).toHaveCount(0);
   await expect(page.getByText("A household admin has not published a map yet.")).toHaveCount(0);
@@ -4326,8 +4330,7 @@ test("members do not see unpublished draft maps", async ({ page }) => {
 
   await page.goto("/stores/100/locations/10/map");
 
-  await expect(page.getByRole("heading", { name: "No Published Map" })).toBeVisible();
+  await expect(page.getByRole("heading", { name: "No Map" })).toBeVisible();
-  await expect(page.getByRole("heading", { name: "No Map" })).toHaveCount(0);
   await expect(page.getByRole("group", { name: "Map setup details" })).toHaveCount(0);
   await expect(page.getByText("Not published")).toHaveCount(0);
   await expect(page.getByText("A household admin has not published a map yet.")).toHaveCount(0);