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", {status} - - - Message - {message} - - + {message} @@ -30,12 +25,7 @@ export function LocationMapLoadErrorState({ location, loadError, onBack, onRetry Map Unavailable - - - Error - {loadError} - - + {loadError} 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;
{message}
{loadError}