From d116129c6237345faa7786ac554bcbe1fd759fd9 Mon Sep 17 00:00:00 2001
From: Nico <Nico>
Date: Sun, 14 Jun 2026 22:58:28 -0700
Subject: [PATCH] fix: simplify map state messages

---
 .../components/maps/LocationMapStateViews.jsx | 14 ++------
 .../src/styles/pages/LocationMapManager.css   | 12 +++++++
 frontend/tests/location-map-manager.spec.ts   | 32 +++++++++----------
 3 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/maps/LocationMapStateViews.jsx b/frontend/src/components/maps/LocationMapStateViews.jsx
index bf5f890..f45addf 100644
--- a/frontend/src/components/maps/LocationMapStateViews.jsx
+++ b/frontend/src/components/maps/LocationMapStateViews.jsx
@@ -11,12 +11,7 @@ export function LocationMapMessageState({ message, location, status = "Loading",
       <main className="location-map-workspace location-map-message-workspace">
         <section className="location-map-setup location-map-message-card" aria-live="polite">
           <h2>{status}</h2>
-          <div className="location-map-setup-rows" role="group" aria-label="Map message details">
-            <div className="location-map-setup-row">
-              <span>Message</span>
-              <strong>{message}</strong>
-            </div>
-          </div>
+          <p className="location-map-state-message">{message}</p>
         </section>
       </main>
     </div>
@@ -30,12 +25,7 @@ export function LocationMapLoadErrorState({ location, loadError, onBack, onRetry
       <main className="location-map-workspace">
         <section className="location-map-setup location-map-load-error" role="alert" aria-live="polite">
           <h2>Map Unavailable</h2>
-          <div className="location-map-setup-rows" role="group" aria-label="Map load details">
-            <div className="location-map-setup-row">
-              <span>Error</span>
-              <strong>{loadError}</strong>
-            </div>
-          </div>
+          <p className="location-map-state-message">{loadError}</p>
           <div className="location-map-setup-actions">
             <button type="button" className="btn-primary" onClick={onRetry}>
               Retry
diff --git a/frontend/src/styles/pages/LocationMapManager.css b/frontend/src/styles/pages/LocationMapManager.css
index 1db49f6..8a793d8 100644
--- a/frontend/src/styles/pages/LocationMapManager.css
+++ b/frontend/src/styles/pages/LocationMapManager.css
@@ -994,6 +994,18 @@
   font-size: 1.35rem;
 }
 
+.location-map-state-message {
+  margin: 0.35rem 0 0.9rem;
+  color: #cbd5e1;
+  font-size: 0.95rem;
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+.location-map-message-card .location-map-state-message {
+  margin-bottom: 0;
+}
+
 .location-map-setup-rows {
   display: grid;
   gap: 0.4rem;
diff --git a/frontend/tests/location-map-manager.spec.ts b/frontend/tests/location-map-manager.spec.ts
index f1a51af..dfef9b0 100644
--- a/frontend/tests/location-map-manager.spec.ts
+++ b/frontend/tests/location-map-manager.spec.ts
@@ -458,7 +458,7 @@ test("admin setup uses compact status rows when no zones exist yet", async ({ pa
   await expect(page.getByLabel("Map controls")).toHaveCount(0);
 });
 
-test("map message prompts for a household with compact status rows", async ({ page }) => {
+test("map message prompts for a household with compact direct text", async ({ page }) => {
   await seedAuthStorage(page, { username: "map-user", role: "member" });
   await mockConfig(page);
   await page.route("**/households", async (route) => {
@@ -472,11 +472,12 @@ test("map message prompts for a household with compact status rows", async ({ pa
   await page.goto("/stores/100/locations/10/map");
 
   await expect(page.getByRole("heading", { name: "Select Household" })).toBeVisible();
-  const messageDetails = page.getByRole("group", { name: "Map message details" });
-  await expect(messageDetails.locator(".location-map-setup-row")).toHaveCount(1);
-  await expect(messageDetails.locator(".location-map-setup-row", { hasText: "Message" })).toContainText("Select a household to manage maps.");
-  await expect(messageDetails.locator(".location-map-setup-row", { hasText: "Status" })).toHaveCount(0);
-  await expect(page.locator(".location-map-message-card p")).toHaveCount(0);
+  const messageCard = page.locator(".location-map-message-card");
+  await expect(messageCard.getByText("Select a household to manage maps.")).toBeVisible();
+  await expect(messageCard.locator(".location-map-state-message")).toHaveText("Select a household to manage maps.");
+  await expect(messageCard.getByRole("group", { name: "Map message details" })).toHaveCount(0);
+  await expect(messageCard.locator(".location-map-setup-row", { hasText: "Message" })).toHaveCount(0);
+  await expect(messageCard.locator(".location-map-setup-row", { hasText: "Status" })).toHaveCount(0);
   await expect(page.getByLabel("Map controls")).toHaveCount(0);
 });
 
@@ -525,11 +526,10 @@ test("load failure shows retryable error instead of no-map setup", async ({ page
 
   const errorCard = page.locator(".location-map-load-error");
   await expect(errorCard.getByRole("heading", { name: "Map Unavailable" })).toBeVisible();
-  const loadDetails = errorCard.getByRole("group", { name: "Map load details" });
-  await expect(loadDetails.locator(".location-map-setup-row")).toHaveCount(1);
-  await expect(loadDetails.locator(".location-map-setup-row", { hasText: "Error" })).toContainText("Map service unavailable");
-  await expect(loadDetails.locator(".location-map-setup-row", { hasText: "Status" })).toHaveCount(0);
-  await expect(errorCard.locator("p")).toHaveCount(0);
+  await expect(errorCard.locator(".location-map-state-message")).toHaveText("Map service unavailable");
+  await expect(errorCard.getByRole("group", { name: "Map load details" })).toHaveCount(0);
+  await expect(errorCard.locator(".location-map-setup-row", { hasText: "Error" })).toHaveCount(0);
+  await expect(errorCard.locator(".location-map-setup-row", { hasText: "Status" })).toHaveCount(0);
   await expect(page.getByText("Load Error")).toBeVisible();
   await expect(page.getByRole("heading", { name: "No Map" })).toHaveCount(0);
   await expect(page.getByRole("button", { name: /Create From/ })).toHaveCount(0);
@@ -594,11 +594,11 @@ test("loading map keeps location context visible", async ({ page }) => {
   await expect(page.getByText("Eastvale")).toBeVisible();
   await expect(page.getByRole("button", { name: "Back to grocery list" })).toBeVisible();
   await expect(page.locator(".location-map-status")).toHaveText("Loading");
-  const messageDetails = page.getByRole("group", { name: "Map message details" });
-  await expect(messageDetails.locator(".location-map-setup-row")).toHaveCount(1);
-  await expect(messageDetails.locator(".location-map-setup-row", { hasText: "Message" })).toContainText("Loading map...");
-  await expect(messageDetails.locator(".location-map-setup-row", { hasText: "Status" })).toHaveCount(0);
-  await expect(page.locator(".location-map-message-card p")).toHaveCount(0);
+  const messageCard = page.locator(".location-map-message-card");
+  await expect(messageCard.locator(".location-map-state-message")).toHaveText("Loading map...");
+  await expect(messageCard.getByRole("group", { name: "Map message details" })).toHaveCount(0);
+  await expect(messageCard.locator(".location-map-setup-row", { hasText: "Message" })).toHaveCount(0);
+  await expect(messageCard.locator(".location-map-setup-row", { hasText: "Status" })).toHaveCount(0);
 
   releaseMapResponse();
   await mapResponseSent;