From 96f1cf46258328f79664c4c36db998533448eb14 Mon Sep 17 00:00:00 2001
From: Nico <Nico>
Date: Wed, 3 Jun 2026 11:55:08 -0700
Subject: [PATCH] fix: clarify selected zone item count

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

diff --git a/frontend/src/components/maps/LocationMapBottomSheet.jsx b/frontend/src/components/maps/LocationMapBottomSheet.jsx
index ccc1653..dc2924e 100644
--- a/frontend/src/components/maps/LocationMapBottomSheet.jsx
+++ b/frontend/src/components/maps/LocationMapBottomSheet.jsx
@@ -46,6 +46,7 @@ export default function LocationMapBottomSheet({
   onDeleteObject,
 }) {
   const selectedTitle = selectedObject?.label || selectedObject?.zone_name || "Map Area";
+  const selectedItemCountLabel = `${selectedZoneItems.length} item${selectedZoneItems.length === 1 ? "" : "s"}`;
   const sheetTitle = mode === "edit"
     ? selectedObject && editorTool === "edit"
       ? "Object Settings"
@@ -214,7 +215,7 @@ export default function LocationMapBottomSheet({
         <div className="location-map-zone-items">
           <div className="location-map-zone-items-title">
             <h2>{selectedTitle}</h2>
-            <span>{selectedZoneItems.length}</span>
+            <span>{selectedItemCountLabel}</span>
           </div>
           {selectedZoneItems.length === 0 ? (
             <p className="location-map-muted">No visible items assigned to this zone.</p>
diff --git a/frontend/src/styles/pages/LocationMapManager.css b/frontend/src/styles/pages/LocationMapManager.css
index 662b1f9..5b92ab5 100644
--- a/frontend/src/styles/pages/LocationMapManager.css
+++ b/frontend/src/styles/pages/LocationMapManager.css
@@ -462,7 +462,7 @@
 }
 
 .location-map-zone-items-title span {
-  min-width: 34px;
+  min-width: 58px;
   padding: 0.2rem 0.45rem;
   border-radius: 999px;
   background: rgba(96, 165, 250, 0.18);
diff --git a/frontend/tests/location-map-manager.spec.ts b/frontend/tests/location-map-manager.spec.ts
index 5541ff2..e6796c9 100644
--- a/frontend/tests/location-map-manager.spec.ts
+++ b/frontend/tests/location-map-manager.spec.ts
@@ -354,6 +354,8 @@ test("admin creates a map from zones, saves a draft, and publishes it", async ({
   await expect(page.getByText("loose batteries")).toHaveCount(0);
 
   await page.locator(".location-map-object", { hasText: "Bread Wall" }).locator("rect").first().click();
+  const zonePanel = page.locator(".location-map-zone-items");
+  await expect(zonePanel.locator(".location-map-zone-items-title span")).toHaveText("2 items");
   await expect(page.getByText("french bread")).toBeVisible();
   await expect(page.getByText("sourdough")).toBeVisible();
   await expect(page.getByText("frozen salmon")).toHaveCount(0);