From 2af22f6bb2d6a55af4ac39e39f0314b54c9b855d Mon Sep 17 00:00:00 2001
From: Nico <Nico>
Date: Thu, 4 Jun 2026 20:20:43 -0700
Subject: [PATCH] fix: compact map layer reset

---
 .../maps/LocationMapBottomSheet.jsx           |  6 +++++-
 .../src/styles/pages/LocationMapManager.css   | 20 +++++++++++++++++--
 frontend/tests/location-map-manager.spec.ts   |  2 ++
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/maps/LocationMapBottomSheet.jsx b/frontend/src/components/maps/LocationMapBottomSheet.jsx
index 0a32625..df30534 100644
--- a/frontend/src/components/maps/LocationMapBottomSheet.jsx
+++ b/frontend/src/components/maps/LocationMapBottomSheet.jsx
@@ -221,8 +221,12 @@ export default function LocationMapBottomSheet({
               className="location-map-layer-reset"
               onClick={resetLayerFilters}
               aria-label="Reset layer filters"
+              title="Reset layer filters"
             >
-              Reset
+              <svg className="location-map-layer-reset-icon" viewBox="0 0 24 24" aria-hidden="true">
+                <path d="M4 7v5h5" />
+                <path d="M5.2 12a7 7 0 1 0 2.1-5" />
+              </svg>
             </button>
           ) : null}
           <button
diff --git a/frontend/src/styles/pages/LocationMapManager.css b/frontend/src/styles/pages/LocationMapManager.css
index 622e0af..a1c716f 100644
--- a/frontend/src/styles/pages/LocationMapManager.css
+++ b/frontend/src/styles/pages/LocationMapManager.css
@@ -564,16 +564,32 @@
 }
 
 .location-map-layer-reset {
+  width: 40px;
+  min-width: 40px;
   min-height: 40px;
-  padding: 0.35rem 0.65rem;
+  padding: 0;
   border: 1px solid var(--color-border-light);
   border-radius: 999px;
   background: rgba(15, 23, 34, 0.72);
   color: #dbeafe;
-  font-weight: 800;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   cursor: pointer;
 }
 
+.location-map-layer-reset-icon {
+  width: 18px;
+  height: 18px;
+  display: block;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  pointer-events: none;
+}
+
 .location-map-display-controls {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
diff --git a/frontend/tests/location-map-manager.spec.ts b/frontend/tests/location-map-manager.spec.ts
index c2362d4..b0560c8 100644
--- a/frontend/tests/location-map-manager.spec.ts
+++ b/frontend/tests/location-map-manager.spec.ts
@@ -4069,6 +4069,8 @@ test("mobile editor uses bottom sheet controls instead of desktop object toolbar
   expect(resetLayersButtonBox).not.toBeNull();
   if (!resetLayersButtonBox) throw new Error("Mobile layer reset button was not measurable");
   expect(resetLayersButtonBox.height).toBeGreaterThanOrEqual(40);
+  expect(resetLayersButtonBox.width).toBeLessThanOrEqual(44);
+  await expect(page.locator(".location-map-layer-reset-icon")).toHaveCount(1);
   await page.getByRole("button", { name: "Reset layer filters" }).click();
   await page.getByRole("button", { name: "Layers" }).click();
   await expect(page.locator(".location-map-pin")).toHaveCount(0);