From ad74262604b2ffe57e9875aea108d11f7115fecc Mon Sep 17 00:00:00 2001
From: Nico <Nico>
Date: Wed, 3 Jun 2026 12:48:07 -0700
Subject: [PATCH] test: cover mobile map editor layout

---
 .../src/styles/pages/LocationMapManager.css   |  2 +-
 frontend/tests/location-map-manager.spec.ts   | 58 +++++++++++++++++++
 2 files changed, 59 insertions(+), 1 deletion(-)

diff --git a/frontend/src/styles/pages/LocationMapManager.css b/frontend/src/styles/pages/LocationMapManager.css
index 5b92ab5..a7b5ad2 100644
--- a/frontend/src/styles/pages/LocationMapManager.css
+++ b/frontend/src/styles/pages/LocationMapManager.css
@@ -559,7 +559,7 @@
   }
 
   .location-map-bottom-sheet {
-    max-height: 38dvh;
+    max-height: 34dvh;
   }
 
   .location-map-topbar {
diff --git a/frontend/tests/location-map-manager.spec.ts b/frontend/tests/location-map-manager.spec.ts
index ba0f14c..dfeff31 100644
--- a/frontend/tests/location-map-manager.spec.ts
+++ b/frontend/tests/location-map-manager.spec.ts
@@ -480,6 +480,64 @@ test("viewer wraps long zone labels and keeps item counts visible", async ({ pag
   await expect(produceArea.locator(".location-map-count")).toHaveAttribute("y", "92");
 });
 
+test("mobile editor uses bottom sheet controls instead of desktop object toolbar", async ({ page }) => {
+  await page.setViewportSize({ width: 390, height: 844 });
+  await mockMapShell(page);
+
+  const mapState = draftMapState([
+    {
+      id: 1601,
+      location_map_id: 900,
+      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");
+
+  await expect(page.getByRole("heading", { name: "Costco" })).toBeVisible();
+  await expect(page.getByText("Eastvale")).toBeVisible();
+  await expect(page.getByRole("heading", { name: "Draft Map" })).toBeVisible();
+  await page.getByRole("button", { name: "Continue Editing" }).click();
+
+  await expect(page.getByLabel("Map controls")).toBeVisible();
+  await expect(page.locator(".location-map-tool-buttons")).toBeHidden();
+  await expect(page.locator(".location-map-mobile-tool-switch")).toBeVisible();
+  await expect(page.getByRole("button", { name: "Pan" })).toBeVisible();
+  await expect(page.getByRole("button", { name: "Objects" })).toBeVisible();
+  await expect(page.locator(".location-map-pin")).toHaveCount(0);
+
+  const canvasBox = await page.locator(".location-map-canvas-shell").boundingBox();
+  const sheetBox = await page.locator(".location-map-bottom-sheet").boundingBox();
+  expect(canvasBox).not.toBeNull();
+  expect(sheetBox).not.toBeNull();
+  if (!canvasBox || !sheetBox) throw new Error("Mobile map layout was not measurable");
+  expect(canvasBox.height).toBeGreaterThan(260);
+  expect(sheetBox.height).toBeLessThanOrEqual(360);
+
+  await page.getByRole("button", { name: "Objects" }).click();
+  await page.locator(".location-map-object", { hasText: "Bakery" }).locator("rect").first().click();
+  await expect(page.getByRole("textbox", { name: "Label" })).toBeVisible();
+});
+
 test("members can view a published map but cannot edit it", async ({ page }) => {
   await mockMapShell(page, memberHousehold);