From 10d442698b947ad4e79fa6e7b52d4c1cb5bc1a1d Mon Sep 17 00:00:00 2001
From: Nico <Nico>
Date: Thu, 4 Jun 2026 13:40:08 -0700
Subject: [PATCH] fix: compact mobile map toolbar

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

diff --git a/frontend/src/styles/pages/LocationMapManager.css b/frontend/src/styles/pages/LocationMapManager.css
index a9a95fb..523d84d 100644
--- a/frontend/src/styles/pages/LocationMapManager.css
+++ b/frontend/src/styles/pages/LocationMapManager.css
@@ -959,8 +959,8 @@
   }
 
   .location-map-toolbar {
-    --location-map-mode-slot: 148px;
-    --location-map-history-slot: 80px;
+    --location-map-mode-slot: 136px;
+    --location-map-history-slot: 76px;
     display: grid;
     grid-template-columns: var(--location-map-mode-slot) minmax(0, 1fr);
     align-items: center;
@@ -1007,7 +1007,7 @@
   .location-map-history-buttons {
     grid-column: 2;
     gap: 0;
-    width: 80px;
+    width: var(--location-map-history-slot);
     justify-self: center;
   }
 
@@ -1031,11 +1031,11 @@
   .location-map-zoom-controls button {
     min-width: 40px;
     min-height: 40px;
-    padding: 0.35rem;
+    padding: 0.3rem;
   }
 
   .location-map-zoom-controls span {
-    min-width: 30px;
+    min-width: 28px;
     font-size: 0.82rem;
   }
 
@@ -1050,15 +1050,15 @@
 
 @media (max-width: 380px) {
   .location-map-toolbar {
-    grid-template-columns: var(--location-map-mode-slot, 144px) var(--location-map-history-slot, 80px);
+    grid-template-columns: var(--location-map-mode-slot, 136px) var(--location-map-history-slot, 76px);
   }
 
   .location-map-toolbar.has-history-slot {
-    grid-template-columns: var(--location-map-mode-slot, 144px) var(--location-map-history-slot, 80px);
+    grid-template-columns: var(--location-map-mode-slot, 136px) var(--location-map-history-slot, 76px);
   }
 
   .location-map-history-buttons {
-    width: 80px;
+    width: var(--location-map-history-slot, 76px);
   }
 
   .location-map-history-buttons button,
diff --git a/frontend/tests/location-map-manager.spec.ts b/frontend/tests/location-map-manager.spec.ts
index 1f96683..155dd41 100644
--- a/frontend/tests/location-map-manager.spec.ts
+++ b/frontend/tests/location-map-manager.spec.ts
@@ -793,8 +793,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).toBeGreaterThanOrEqual(146);
-  expect(modeBox.width).toBeLessThanOrEqual(150);
+  expect(modeBox.width).toBeGreaterThanOrEqual(134);
+  expect(modeBox.width).toBeLessThanOrEqual(138);
   expect(reservedHistoryBox.width).toBeGreaterThanOrEqual(70);
   expect(reservedHistoryBox.x).toBeGreaterThan(modeBox.x + modeBox.width - 1);
   await expect(historyActions.getByRole("button", { name: "Undo" })).toBeVisible();
@@ -824,8 +824,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(146);
-  expect(editModeBox.width).toBeLessThanOrEqual(150);
+  expect(editModeBox.width).toBeGreaterThanOrEqual(134);
+  expect(editModeBox.width).toBeLessThanOrEqual(138);
   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);
@@ -884,8 +884,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(146);
-  expect(modeBox.width).toBeLessThanOrEqual(150);
+  expect(modeBox.width).toBeGreaterThanOrEqual(134);
+  expect(modeBox.width).toBeLessThanOrEqual(138);
   expect(modeBox.x + modeBox.width).toBeLessThanOrEqual(historyBox.x);
   expect(zoomBox.y).toBeGreaterThan(modeBox.y + modeBox.height - 1);
   expect(zoomBox.x).toBeGreaterThanOrEqual(toolbarBox.x);