From 0361420813fbd8fc2bf40a7892ee8c0871831b1b Mon Sep 17 00:00:00 2001
From: Nico <Nico>
Date: Wed, 3 Jun 2026 12:56:56 -0700
Subject: [PATCH] fix: distinguish mobile map edit modes

---
 frontend/src/components/maps/LocationMapBottomSheet.jsx | 4 ++--
 frontend/src/styles/pages/LocationMapManager.css        | 7 ++++++-
 frontend/tests/location-map-manager.spec.ts             | 6 ++++--
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/maps/LocationMapBottomSheet.jsx b/frontend/src/components/maps/LocationMapBottomSheet.jsx
index dc2924e..3995588 100644
--- a/frontend/src/components/maps/LocationMapBottomSheet.jsx
+++ b/frontend/src/components/maps/LocationMapBottomSheet.jsx
@@ -115,14 +115,14 @@ export default function LocationMapBottomSheet({
         <div className="location-map-mobile-tool-switch" aria-label="Edit tool">
           <button
             type="button"
-            className={editorTool === "pan" ? "active" : ""}
+            className={[editorTool === "pan" ? "active" : "", "is-pan"].filter(Boolean).join(" ")}
             onClick={onPanMode}
           >
             Pan
           </button>
           <button
             type="button"
-            className={editorTool === "edit" ? "active" : ""}
+            className={[editorTool === "edit" ? "active" : "", "is-edit"].filter(Boolean).join(" ")}
             onClick={onEditObjects}
           >
             Objects
diff --git a/frontend/src/styles/pages/LocationMapManager.css b/frontend/src/styles/pages/LocationMapManager.css
index a7b5ad2..e8c23db 100644
--- a/frontend/src/styles/pages/LocationMapManager.css
+++ b/frontend/src/styles/pages/LocationMapManager.css
@@ -415,7 +415,12 @@
   font-weight: 800;
 }
 
-.location-map-mobile-tool-switch button.active {
+.location-map-mobile-tool-switch button.is-pan.active {
+  border-color: rgba(245, 158, 11, 0.78);
+  background: rgba(245, 158, 11, 0.22);
+}
+
+.location-map-mobile-tool-switch button.is-edit.active {
   border-color: rgb(45, 212, 191);
   background: rgba(20, 184, 166, 0.24);
 }
diff --git a/frontend/tests/location-map-manager.spec.ts b/frontend/tests/location-map-manager.spec.ts
index dfeff31..a777852 100644
--- a/frontend/tests/location-map-manager.spec.ts
+++ b/frontend/tests/location-map-manager.spec.ts
@@ -521,8 +521,9 @@ test("mobile editor uses bottom sheet controls instead of desktop object toolbar
   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.getByRole("button", { name: "Pan" })).toHaveClass(/active/);
+  await expect(page.getByRole("button", { name: "Pan" })).toHaveClass(/is-pan/);
+  await expect(page.getByRole("button", { name: "Objects" })).toHaveClass(/is-edit/);
   await expect(page.locator(".location-map-pin")).toHaveCount(0);
 
   const canvasBox = await page.locator(".location-map-canvas-shell").boundingBox();
@@ -534,6 +535,7 @@ test("mobile editor uses bottom sheet controls instead of desktop object toolbar
   expect(sheetBox.height).toBeLessThanOrEqual(360);
 
   await page.getByRole("button", { name: "Objects" }).click();
+  await expect(page.getByRole("button", { name: "Objects" })).toHaveClass(/active/);
   await page.locator(".location-map-object", { hasText: "Bakery" }).locator("rect").first().click();
   await expect(page.getByRole("textbox", { name: "Label" })).toBeVisible();
 });