From 95ac122266cdc9a5178445b16e8c9574e384000d Mon Sep 17 00:00:00 2001
From: Nico <Nico>
Date: Thu, 4 Jun 2026 09:49:20 -0700
Subject: [PATCH] fix: stabilize map toolbar controls

---
 .../src/styles/pages/LocationMapManager.css   | 20 +++++++++++++------
 frontend/tests/location-map-manager.spec.ts   | 14 ++++++++++++-
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/frontend/src/styles/pages/LocationMapManager.css b/frontend/src/styles/pages/LocationMapManager.css
index b754211..68ec7cc 100644
--- a/frontend/src/styles/pages/LocationMapManager.css
+++ b/frontend/src/styles/pages/LocationMapManager.css
@@ -307,6 +307,12 @@
   cursor: grabbing;
 }
 
+.location-map-object:not(.is-selected):hover rect:first-child {
+  fill: rgba(37, 99, 141, 0.88);
+  stroke: rgba(147, 197, 253, 0.9);
+  stroke-width: 3;
+}
+
 .location-map-object rect:first-child:focus-visible {
   outline: none;
   stroke: #bfdbfe;
@@ -878,8 +884,10 @@
   }
 
   .location-map-toolbar {
+    --location-map-mode-slot: clamp(144px, 37vw, 164px);
+    --location-map-history-slot: 80px;
     display: grid;
-    grid-template-columns: 136px minmax(0, 1fr);
+    grid-template-columns: var(--location-map-mode-slot) minmax(0, 1fr);
     align-items: center;
     justify-content: stretch;
     column-gap: 0.15rem;
@@ -888,7 +896,7 @@
   }
 
   .location-map-toolbar.has-history-slot {
-    grid-template-columns: 136px 80px minmax(0, 1fr);
+    grid-template-columns: var(--location-map-mode-slot) var(--location-map-history-slot) minmax(0, 1fr);
   }
 
   .location-map-mode-group {
@@ -939,7 +947,7 @@
 
   .location-map-zoom-controls {
     grid-column: 2;
-    gap: 0.12rem;
+    gap: 0.05rem;
     margin-left: 0;
     justify-self: end;
   }
@@ -955,7 +963,7 @@
   }
 
   .location-map-zoom-controls span {
-    min-width: 36px;
+    min-width: 30px;
     font-size: 0.82rem;
   }
 
@@ -970,11 +978,11 @@
 
 @media (max-width: 380px) {
   .location-map-toolbar {
-    grid-template-columns: minmax(0, 1fr) 80px;
+    grid-template-columns: var(--location-map-mode-slot, 144px) var(--location-map-history-slot, 80px);
   }
 
   .location-map-toolbar.has-history-slot {
-    grid-template-columns: minmax(0, 1fr) 80px;
+    grid-template-columns: var(--location-map-mode-slot, 144px) var(--location-map-history-slot, 80px);
   }
 
   .location-map-history-buttons {
diff --git a/frontend/tests/location-map-manager.spec.ts b/frontend/tests/location-map-manager.spec.ts
index 5f9835f..85b639d 100644
--- a/frontend/tests/location-map-manager.spec.ts
+++ b/frontend/tests/location-map-manager.spec.ts
@@ -790,7 +790,8 @@ test("mobile keeps draft preview status compact in the topbar", async ({ page })
   expect(statusBox.y).toBeLessThan(titleBox.y + titleBox.height);
   expect(statusBox.x).toBeGreaterThan(titleBox.x);
   expect(toolbarBox.height).toBeLessThanOrEqual(64);
-  expect(modeBox.width).toBeLessThanOrEqual(150);
+  expect(modeBox.width).toBeGreaterThanOrEqual(142);
+  expect(modeBox.width).toBeLessThanOrEqual(166);
   expect(reservedHistoryBox.width).toBeGreaterThanOrEqual(70);
   expect(reservedHistoryBox.x).toBeGreaterThan(modeBox.x + modeBox.width - 1);
   expect(zoomBox.y).toBeLessThan(modeBox.y + modeBox.height);
@@ -816,6 +817,8 @@ test("mobile keeps draft preview status compact in the topbar", async ({ page })
   expect(Math.abs(editModeBox.x - modeBox.x)).toBeLessThanOrEqual(1);
   expect(Math.abs(editModeGroupBox.width - modeGroupBox.width)).toBeLessThanOrEqual(1);
   expect(Math.abs(editModeBox.width - modeBox.width)).toBeLessThanOrEqual(1);
+  expect(editModeBox.width).toBeGreaterThanOrEqual(142);
+  expect(editModeBox.width).toBeLessThanOrEqual(166);
   expect(Math.abs(editHistoryBox.width - reservedHistoryBox.width)).toBeLessThanOrEqual(1);
   expect(editHistoryBox.x).toBeGreaterThan(editModeBox.x + editModeBox.width);
   expect(editZoomBox.x).toBeGreaterThan(editHistoryBox.x + editHistoryBox.width);
@@ -874,6 +877,8 @@ test("narrow mobile toolbar keeps map controls tappable without overflow", async
 
   expect(toolbarBox.x).toBeGreaterThanOrEqual(0);
   expect(toolbarBox.x + toolbarBox.width).toBeLessThanOrEqual(361);
+  expect(modeBox.width).toBeGreaterThanOrEqual(142);
+  expect(modeBox.width).toBeLessThanOrEqual(166);
   expect(modeBox.x + modeBox.width).toBeLessThanOrEqual(historyBox.x);
   expect(zoomBox.y).toBeGreaterThan(modeBox.y + modeBox.height - 1);
   expect(zoomBox.x).toBeGreaterThanOrEqual(toolbarBox.x);
@@ -2458,8 +2463,15 @@ test("viewer map areas are keyboard selectable", async ({ page }) => {
 
   const bakeryArea = page.getByRole("button", { name: "Map area Bakery" });
   const frozenArea = page.getByRole("button", { name: "Map area Frozen Foods" });
+  const bakeryRect = page.locator('[data-object-key="1571"]').locator("rect").first();
   await expect(bakeryArea).toHaveAttribute("aria-pressed", "false");
 
+  const initialFill = await bakeryRect.evaluate((element) => getComputedStyle(element).fill);
+  await bakeryRect.hover();
+  await expect.poll(async () => (
+    bakeryRect.evaluate((element) => getComputedStyle(element).fill)
+  )).not.toBe(initialFill);
+
   await bakeryArea.focus();
   await expect(bakeryArea).toBeFocused();
   await page.keyboard.press("Enter");