From aff9b2cac95bffd4fb226ffab0af309e8ebd3887 Mon Sep 17 00:00:00 2001
From: Nico <Nico>
Date: Thu, 4 Jun 2026 09:28:26 -0700
Subject: [PATCH] fix: add mobile map sheet handle

---
 .../components/maps/LocationMapBottomSheet.jsx    |  1 +
 frontend/src/styles/pages/LocationMapManager.css  | 15 +++++++++++++++
 frontend/tests/location-map-manager.spec.ts       |  6 +++++-
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/maps/LocationMapBottomSheet.jsx b/frontend/src/components/maps/LocationMapBottomSheet.jsx
index e31dd5b..d2f860f 100644
--- a/frontend/src/components/maps/LocationMapBottomSheet.jsx
+++ b/frontend/src/components/maps/LocationMapBottomSheet.jsx
@@ -165,6 +165,7 @@ export default function LocationMapBottomSheet({
 
   return (
     <aside className="location-map-bottom-sheet">
+      <div className="location-map-bottom-sheet-handle" aria-hidden="true" />
       <div className="location-map-sheet-header">
         <div>
           <div className="location-map-sheet-heading">
diff --git a/frontend/src/styles/pages/LocationMapManager.css b/frontend/src/styles/pages/LocationMapManager.css
index 4356877..b754211 100644
--- a/frontend/src/styles/pages/LocationMapManager.css
+++ b/frontend/src/styles/pages/LocationMapManager.css
@@ -393,6 +393,7 @@
 }
 
 .location-map-bottom-sheet {
+  position: relative;
   max-height: 43vh;
   overflow-y: auto;
   padding: 0.8rem clamp(0.75rem, 2vw, 1.25rem) 1rem;
@@ -401,6 +402,10 @@
   box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.28);
 }
 
+.location-map-bottom-sheet-handle {
+  display: none;
+}
+
 .location-map-sheet-header {
   display: flex;
   justify-content: space-between;
@@ -840,6 +845,16 @@
 
   .location-map-bottom-sheet {
     max-height: 34dvh;
+    padding-top: 0.55rem;
+  }
+
+  .location-map-bottom-sheet-handle {
+    display: block;
+    width: 42px;
+    height: 4px;
+    margin: 0 auto 0.55rem;
+    border-radius: 999px;
+    background: rgba(148, 163, 184, 0.5);
   }
 
   .location-map-topbar {
diff --git a/frontend/tests/location-map-manager.spec.ts b/frontend/tests/location-map-manager.spec.ts
index 4ef5b1a..5f9835f 100644
--- a/frontend/tests/location-map-manager.spec.ts
+++ b/frontend/tests/location-map-manager.spec.ts
@@ -2659,11 +2659,15 @@ test("mobile editor uses bottom sheet controls instead of desktop object toolbar
 
   const canvasBox = await page.locator(".location-map-canvas-shell").boundingBox();
   const sheetBox = await page.locator(".location-map-bottom-sheet").boundingBox();
+  const sheetHandleBox = await page.locator(".location-map-bottom-sheet-handle").boundingBox();
   expect(canvasBox).not.toBeNull();
   expect(sheetBox).not.toBeNull();
-  if (!canvasBox || !sheetBox) throw new Error("Mobile map layout was not measurable");
+  expect(sheetHandleBox).not.toBeNull();
+  if (!canvasBox || !sheetBox || !sheetHandleBox) throw new Error("Mobile map layout was not measurable");
   expect(canvasBox.height).toBeGreaterThan(260);
   expect(sheetBox.height).toBeLessThanOrEqual(360);
+  expect(sheetHandleBox.width).toBeGreaterThanOrEqual(36);
+  expect(sheetHandleBox.height).toBeLessThanOrEqual(6);
 
   await page.locator(".location-map-object", { hasText: "Bakery" }).locator("rect").first().click();
   const labelInput = page.getByRole("textbox", { name: "Label" });