diff --git a/frontend/src/components/maps/LocationMapStateViews.jsx b/frontend/src/components/maps/LocationMapStateViews.jsx
index 144635e..e51cdb4 100644
--- a/frontend/src/components/maps/LocationMapStateViews.jsx
+++ b/frontend/src/components/maps/LocationMapStateViews.jsx
@@ -9,7 +9,19 @@ export function LocationMapMessageState({ message, location, status = "Loading",
) : null}
- {message}
+
+ {status}
+
+
+ Status
+ {status}
+
+
+ Detail
+ {message}
+
+
+
);
diff --git a/frontend/src/pages/LocationMapManager.jsx b/frontend/src/pages/LocationMapManager.jsx
index a79125b..fb56bea 100644
--- a/frontend/src/pages/LocationMapManager.jsx
+++ b/frontend/src/pages/LocationMapManager.jsx
@@ -381,7 +381,12 @@ export default function LocationMapManager() {
}
if (!activeHousehold) {
- return ;
+ return (
+
+ );
}
if (loadError) {
diff --git a/frontend/src/styles/pages/LocationMapManager.css b/frontend/src/styles/pages/LocationMapManager.css
index 1f68297..a467313 100644
--- a/frontend/src/styles/pages/LocationMapManager.css
+++ b/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;
diff --git a/frontend/tests/location-map-manager.spec.ts b/frontend/tests/location-map-manager.spec.ts
index a16072e..b8991c3 100644
--- a/frontend/tests/location-map-manager.spec.ts
+++ b/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;