From af08bf5c94cbd4fb2e6c03351916d0f281f88893 Mon Sep 17 00:00:00 2001
From: Nico <Nico>
Date: Thu, 4 Jun 2026 02:44:19 -0700
Subject: [PATCH] fix: compact map topbar back control

---
 frontend/src/components/maps/LocationMapTopbar.jsx | 9 +++++++--
 frontend/src/styles/pages/LocationMapManager.css   | 7 +++++--
 frontend/tests/location-map-manager.spec.ts        | 8 ++++++--
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/maps/LocationMapTopbar.jsx b/frontend/src/components/maps/LocationMapTopbar.jsx
index 187732b..8f13530 100644
--- a/frontend/src/components/maps/LocationMapTopbar.jsx
+++ b/frontend/src/components/maps/LocationMapTopbar.jsx
@@ -5,8 +5,13 @@ export default function LocationMapTopbar({ location, status, onBack }) {
 
   return (
     <header className="location-map-topbar">
-      <button type="button" className="location-map-back" onClick={onBack}>
-        Back
+      <button
+        type="button"
+        className="location-map-back"
+        onClick={onBack}
+        aria-label="Back to grocery list"
+      >
+        <span aria-hidden="true">&larr;</span>
       </button>
       <div className="location-map-title">
         <h1>{getStoreName(location)}</h1>
diff --git a/frontend/src/styles/pages/LocationMapManager.css b/frontend/src/styles/pages/LocationMapManager.css
index 44c651f..915143a 100644
--- a/frontend/src/styles/pages/LocationMapManager.css
+++ b/frontend/src/styles/pages/LocationMapManager.css
@@ -33,7 +33,10 @@
 }
 
 .location-map-back {
-  padding: 0 0.85rem;
+  width: 40px;
+  padding: 0;
+  font-size: 1.15rem;
+  line-height: 1;
 }
 
 .location-map-title {
@@ -789,7 +792,7 @@
   }
 
   .location-map-back {
-    padding: 0 0.65rem;
+    width: 40px;
   }
 
   .location-map-status {
diff --git a/frontend/tests/location-map-manager.spec.ts b/frontend/tests/location-map-manager.spec.ts
index f30c28f..f83e16c 100644
--- a/frontend/tests/location-map-manager.spec.ts
+++ b/frontend/tests/location-map-manager.spec.ts
@@ -324,7 +324,7 @@ test("admin creates a map from zones, saves a draft, and publishes it", async ({
   await confirmSlide(page);
   await expect(page.locator(".location-map-object", { hasText: "Temporary Freezer" })).toHaveCount(0);
 
-  await page.getByRole("button", { name: "Back" }).click();
+  await page.getByRole("button", { name: "Back to grocery list" }).click();
   await expect(page.getByRole("heading", { name: "Leave with unsaved changes?" })).toBeVisible();
   await page.getByRole("button", { name: "Cancel" }).click();
   await expect(page).toHaveURL(/\/stores\/100\/locations\/10\/map$/);
@@ -569,6 +569,7 @@ test("mobile keeps draft preview status compact in the topbar", async ({ page })
   await page.getByRole("button", { name: "Preview Draft" }).click();
 
   const topbar = page.locator(".location-map-topbar");
+  const backButton = page.getByRole("button", { name: "Back to grocery list" });
   const status = page.locator(".location-map-status");
   const toolbar = page.locator(".location-map-toolbar");
   const modeButtons = page.locator(".location-map-mode-buttons");
@@ -576,21 +577,24 @@ test("mobile keeps draft preview status compact in the topbar", async ({ page })
   await expect(status).toHaveText("Draft Preview");
 
   const topbarBox = await topbar.boundingBox();
+  const backButtonBox = await backButton.boundingBox();
   const titleBox = await page.locator(".location-map-title").boundingBox();
   const statusBox = await status.boundingBox();
   const toolbarBox = await toolbar.boundingBox();
   const modeBox = await modeButtons.boundingBox();
   const zoomBox = await zoomControls.boundingBox();
   expect(topbarBox).not.toBeNull();
+  expect(backButtonBox).not.toBeNull();
   expect(titleBox).not.toBeNull();
   expect(statusBox).not.toBeNull();
   expect(toolbarBox).not.toBeNull();
   expect(modeBox).not.toBeNull();
   expect(zoomBox).not.toBeNull();
-  if (!topbarBox || !titleBox || !statusBox || !toolbarBox || !modeBox || !zoomBox) {
+  if (!topbarBox || !backButtonBox || !titleBox || !statusBox || !toolbarBox || !modeBox || !zoomBox) {
     throw new Error("Mobile map controls layout was not measurable");
   }
   expect(topbarBox.height).toBeLessThanOrEqual(66);
+  expect(backButtonBox.width).toBeLessThanOrEqual(42);
   expect(statusBox.y).toBeLessThan(titleBox.y + titleBox.height);
   expect(statusBox.x).toBeGreaterThan(titleBox.x);
   expect(toolbarBox.height).toBeLessThanOrEqual(64);