From a8f747984dafa011dd1f5701cccc718d8c2db79c Mon Sep 17 00:00:00 2001
From: Nico <Nico>
Date: Wed, 3 Jun 2026 15:22:54 -0700
Subject: [PATCH] fix: compact selected zone panel

---
 .../maps/LocationMapBottomSheet.jsx           | 12 ++---
 .../src/styles/pages/LocationMapManager.css   | 44 +++++++++----------
 frontend/tests/location-map-manager.spec.ts   | 11 +++--
 3 files changed, 33 insertions(+), 34 deletions(-)

diff --git a/frontend/src/components/maps/LocationMapBottomSheet.jsx b/frontend/src/components/maps/LocationMapBottomSheet.jsx
index 883a3dc..646dad2 100644
--- a/frontend/src/components/maps/LocationMapBottomSheet.jsx
+++ b/frontend/src/components/maps/LocationMapBottomSheet.jsx
@@ -68,6 +68,7 @@ export default function LocationMapBottomSheet({
     : editorTool === "edit"
       ? "Tap an area to select it."
       : "Drag and zoom without changing objects.";
+  const showHeaderItemCount = mode !== "edit" && Boolean(selectedObject);
   const showEditorControls = mode === "edit" && canManage;
   const showSelectedObjectForm = Boolean(mode === "edit" && editorTool === "edit" && selectedObject);
   const changedLayerCount = DISPLAY_CONTROLS.filter(([key]) => filters[key] !== DEFAULT_MAP_FILTERS[key]).length;
@@ -109,7 +110,12 @@ export default function LocationMapBottomSheet({
     <aside className="location-map-bottom-sheet">
       <div className="location-map-sheet-header">
         <div>
-          <strong>{sheetTitle}</strong>
+          <div className="location-map-sheet-heading">
+            <strong>{sheetTitle}</strong>
+            {showHeaderItemCount ? (
+              <span className="location-map-sheet-count">{selectedItemCountLabel}</span>
+            ) : null}
+          </div>
           {mode === "edit" && canManage ? (
             <span>{sheetDescription}</span>
           ) : null}
@@ -250,10 +256,6 @@ export default function LocationMapBottomSheet({
         </p>
       ) : selectedObject ? (
         <div className="location-map-zone-items">
-          <div className="location-map-zone-items-title">
-            <h2>{selectedTitle}</h2>
-            <span>{selectedItemCountLabel}</span>
-          </div>
           {selectedZoneItems.length === 0 ? (
             <div className="location-map-zone-empty">
               <p className="location-map-muted">
diff --git a/frontend/src/styles/pages/LocationMapManager.css b/frontend/src/styles/pages/LocationMapManager.css
index a2bca84..9136ce3 100644
--- a/frontend/src/styles/pages/LocationMapManager.css
+++ b/frontend/src/styles/pages/LocationMapManager.css
@@ -335,8 +335,16 @@
   min-width: 0;
 }
 
+.location-map-sheet-heading {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
 .location-map-sheet-header strong {
   display: block;
+  min-width: 0;
   color: #f8fafc;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -355,6 +363,19 @@
   color: #9fb3c8;
 }
 
+.location-map-sheet-header .location-map-sheet-count {
+  flex: 0 0 auto;
+  min-width: 58px;
+  margin-top: 0;
+  padding: 0.2rem 0.45rem;
+  border-radius: 999px;
+  background: rgba(96, 165, 250, 0.18);
+  color: #f8fafc;
+  font-size: 0.82rem;
+  font-weight: 900;
+  text-align: center;
+}
+
 .location-map-layer-toggle {
   min-height: 40px;
   display: inline-flex;
@@ -491,29 +512,6 @@
   gap: 0.45rem;
 }
 
-.location-map-zone-items h2 {
-  font-size: 1rem;
-}
-
-.location-map-zone-items-title {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-  margin-bottom: 0.55rem;
-}
-
-.location-map-zone-items-title span {
-  min-width: 58px;
-  padding: 0.2rem 0.45rem;
-  border-radius: 999px;
-  background: rgba(96, 165, 250, 0.18);
-  color: #f8fafc;
-  font-size: 0.82rem;
-  font-weight: 900;
-  text-align: center;
-}
-
 .location-map-zone-empty {
   display: grid;
   gap: 0.55rem;
diff --git a/frontend/tests/location-map-manager.spec.ts b/frontend/tests/location-map-manager.spec.ts
index b94cae4..5a51959 100644
--- a/frontend/tests/location-map-manager.spec.ts
+++ b/frontend/tests/location-map-manager.spec.ts
@@ -364,8 +364,7 @@ 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.locator(".location-map-sheet-count")).toHaveText("2 items");
   await expect(page.getByText("french bread")).toBeVisible();
   await expect(page.getByText("sourdough")).toBeVisible();
   await expect(page.getByText("frozen salmon")).toHaveCount(0);
@@ -759,12 +758,12 @@ test("viewer explains when selected zone items are hidden by filters", async ({
   await expect(page.locator(".location-map-pin")).toHaveCount(0);
 
   await frozenArea.locator("rect").first().click();
-  await expect(page.locator(".location-map-zone-items-title span")).toHaveText("0 shown");
+  await expect(page.locator(".location-map-sheet-count")).toHaveText("0 shown");
   await expect(page.getByText("Items are assigned here, but hidden by layer filters.")).toBeVisible();
   await expect(page.getByText("frozen salmon")).toHaveCount(0);
 
   await page.getByRole("button", { name: "Show Zone Items" }).click();
-  await expect(page.locator(".location-map-zone-items-title span")).toHaveText("1 item");
+  await expect(page.locator(".location-map-sheet-count")).toHaveText("1 item");
   await expect(page.getByText("frozen salmon")).toBeVisible();
   await expect(frozenArea.locator(".location-map-count")).toHaveText("1 item");
   await expect(page.locator(".location-map-pin")).toHaveCount(0);
@@ -833,11 +832,11 @@ test("viewer handles empty and many-item zone panels without default pins", asyn
   await expect(page.locator(".location-map-pin")).toHaveCount(0);
 
   await page.locator('[data-object-key="1562"]').locator("rect").first().click();
-  await expect(page.locator(".location-map-zone-items-title span")).toHaveText("0 items");
+  await expect(page.locator(".location-map-sheet-count")).toHaveText("0 items");
   await expect(page.getByText("No items assigned to this zone yet.")).toBeVisible();
 
   await page.locator('[data-object-key="1561"]').locator("rect").first().click();
-  await expect(page.locator(".location-map-zone-items-title span")).toHaveText("14 items");
+  await expect(page.locator(".location-map-sheet-count")).toHaveText("14 items");
   await expect(page.locator(".location-map-zone-items li")).toHaveCount(14);
   await expect(page.locator(".location-map-zone-items li").first()).toContainText("bulk item 1");
   await expect(page.locator(".location-map-zone-items li").last()).toContainText("bulk item 14");