frontend/src/components/maps/LocationMapStateViews.jsx

@@ -9,7 +9,19 @@ export function LocationMapMessageState({ message, location, status = "Loading",
         <LocationMapTopbar location={location} status={status} onBack={onBack} />
       ) : null}
       <main className="location-map-workspace location-map-message-workspace">
-        <p className="location-map-loading">{message}</p>
+        <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 status">
+            <div className="location-map-setup-row">
+              <span>Status</span>
+              <strong>{status}</strong>
+            </div>
+            <div className="location-map-setup-row">
+              <span>Detail</span>
+              <strong>{message}</strong>
+            </div>
+          </div>
+        </section>
       </main>
     </div>
   );

frontend/src/pages/LocationMapManager.jsx

@@ -381,7 +381,12 @@ export default function LocationMapManager() {
   }
 
   if (!activeHousehold) {
-    return <LocationMapMessageState message="Select a household to manage maps." />;
+    return (
+      <LocationMapMessageState
+        status="Select Household"
+        message="Select a household to manage maps."
+      />
+    );
   }
 
   if (loadError) {

frontend/src/styles/pages/LocationMapManager.css

@@ -935,11 +935,6 @@
   gap: 0.6rem;
 }
 
-.location-map-loading {
-  margin: 3rem auto;
-  color: #9fb3c8;
-}
-
 .location-map-message-workspace {
   display: flex;
   align-items: center;

frontend/tests/location-map-manager.spec.ts

@@ -432,6 +432,27 @@ 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 }) => {
+  await seedAuthStorage(page, { username: "map-user", role: "member" });
+  await mockConfig(page);
+  await page.route("**/households", async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify([]),
+    });
+  });
+
+  await page.goto("/stores/100/locations/10/map");
+
+  await expect(page.getByRole("heading", { name: "Select Household" })).toBeVisible();
+  const messageStatus = page.getByRole("group", { name: "Map message status" });
+  await expect(messageStatus.locator(".location-map-setup-row", { hasText: "Status" })).toContainText("Select Household");
+  await expect(messageStatus.locator(".location-map-setup-row", { hasText: "Detail" })).toContainText("Select a household to manage maps.");
+  await expect(page.locator(".location-map-message-card p")).toHaveCount(0);
+  await expect(page.getByLabel("Map controls")).toHaveCount(0);
+});
+
 test("load failure shows retryable error instead of no-map setup", async ({ page }) => {
   await mockMapShell(page);
 
@@ -545,7 +566,10 @@ 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");
-  await expect(page.getByText("Loading map...")).toBeVisible();
+  const messageStatus = page.getByRole("group", { name: "Map message status" });
+  await expect(messageStatus.locator(".location-map-setup-row", { hasText: "Status" })).toContainText("Loading");
+  await expect(messageStatus.locator(".location-map-setup-row", { hasText: "Detail" })).toContainText("Loading map...");
+  await expect(page.locator(".location-map-message-card p")).toHaveCount(0);
 
   releaseMapResponse();
   await mapResponseSent;