From ff781493363911f4140940a94bf88f37f8fa716a Mon Sep 17 00:00:00 2001
From: Nico <Nico>
Date: Wed, 3 Jun 2026 19:54:01 -0700
Subject: [PATCH] fix: disable map zoom controls at limits

---
 .../components/maps/LocationMapToolbar.jsx    |  9 ++-
 frontend/tests/location-map-manager.spec.ts   | 55 +++++++++++++++++++
 2 files changed, 61 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/maps/LocationMapToolbar.jsx b/frontend/src/components/maps/LocationMapToolbar.jsx
index 18eeca4..7205b4f 100644
--- a/frontend/src/components/maps/LocationMapToolbar.jsx
+++ b/frontend/src/components/maps/LocationMapToolbar.jsx
@@ -1,4 +1,4 @@
-import { clampMapZoom } from "../../lib/locationMapUtils";
+import { MAX_MAP_ZOOM, MIN_MAP_ZOOM, clampMapZoom } from "../../lib/locationMapUtils";
 
 export default function LocationMapToolbar({
   mode,
@@ -14,6 +14,9 @@ export default function LocationMapToolbar({
   onPanMode,
   onEditObjects,
 }) {
+  const isAtMinZoom = zoom <= MIN_MAP_ZOOM;
+  const isAtMaxZoom = zoom >= MAX_MAP_ZOOM;
+
   return (
     <section className="location-map-toolbar" aria-label="Map controls">
       <div className="location-map-mode-group">
@@ -69,7 +72,7 @@ export default function LocationMapToolbar({
         <button
           type="button"
           onClick={() => setZoom((value) => Number(clampMapZoom(value - 0.15).toFixed(2)))}
-          disabled={!hasAnyMap}
+          disabled={!hasAnyMap || isAtMinZoom}
           aria-label="Zoom out"
         >
           -
@@ -78,7 +81,7 @@ export default function LocationMapToolbar({
         <button
           type="button"
           onClick={() => setZoom((value) => Number(clampMapZoom(value + 0.15).toFixed(2)))}
-          disabled={!hasAnyMap}
+          disabled={!hasAnyMap || isAtMaxZoom}
           aria-label="Zoom in"
         >
           +
diff --git a/frontend/tests/location-map-manager.spec.ts b/frontend/tests/location-map-manager.spec.ts
index c0ff775..19efac0 100644
--- a/frontend/tests/location-map-manager.spec.ts
+++ b/frontend/tests/location-map-manager.spec.ts
@@ -1302,6 +1302,61 @@ test("mobile fit zoom fits the map into the visible canvas", async ({ page }) =>
   expect(svgBox.height).toBeLessThanOrEqual(scrollBox.height + 1);
 });
 
+test("zoom controls disable at map zoom limits", async ({ page }) => {
+  await mockMapShell(page);
+
+  const mapState = publishedMapState([
+    {
+      id: 1591,
+      location_map_id: 901,
+      zone_id: 501,
+      zone_name: "Bakery",
+      type: "zone",
+      label: "Bakery",
+      x: 40,
+      y: 40,
+      width: 260,
+      height: 160,
+      rotation: 0,
+      locked: false,
+      visible: true,
+      sort_order: 1,
+    },
+  ], true);
+
+  await page.route("**/households/1/locations/10/map", async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify(mapState),
+    });
+  });
+
+  await page.goto("/stores/100/locations/10/map");
+
+  const zoomText = page.locator(".location-map-zoom-controls span");
+  const zoomIn = page.getByRole("button", { name: "Zoom in" });
+  const zoomOut = page.getByRole("button", { name: "Zoom out" });
+  await expect(zoomIn).toBeEnabled();
+  await expect(zoomOut).toBeEnabled();
+
+  for (let index = 0; index < 6; index += 1) {
+    await zoomIn.click();
+  }
+
+  await expect(zoomText).toHaveText("160%");
+  await expect(zoomIn).toBeDisabled();
+  await expect(zoomOut).toBeEnabled();
+
+  for (let index = 0; index < 9; index += 1) {
+    await zoomOut.click();
+  }
+
+  await expect(zoomText).toHaveText("30%");
+  await expect(zoomOut).toBeDisabled();
+  await expect(zoomIn).toBeEnabled();
+});
+
 test("mobile editor uses bottom sheet controls instead of desktop object toolbar", async ({ page }) => {
   await page.setViewportSize({ width: 390, height: 844 });
   await mockMapShell(page);