From 164a95e058efbca61e8ec90676f172e618bd73c8 Mon Sep 17 00:00:00 2001
From: Nico <Nico>
Date: Thu, 4 Jun 2026 00:34:18 -0700
Subject: [PATCH] fix: compact map geometry controls

---
 .../maps/LocationMapBottomSheet.jsx           | 112 ++++++++++--------
 .../src/styles/pages/LocationMapManager.css   |  55 ++++++++-
 frontend/tests/location-map-manager.spec.ts   |  14 +++
 3 files changed, 127 insertions(+), 54 deletions(-)

diff --git a/frontend/src/components/maps/LocationMapBottomSheet.jsx b/frontend/src/components/maps/LocationMapBottomSheet.jsx
index 67668a7..3929af6 100644
--- a/frontend/src/components/maps/LocationMapBottomSheet.jsx
+++ b/frontend/src/components/maps/LocationMapBottomSheet.jsx
@@ -300,55 +300,69 @@ export default function LocationMapBottomSheet({
               Locked
             </label>
           </div>
-          <div className="location-map-object-grid">
-            <label>
-              X
-              <input
-                type="number"
-                min="0"
-                max={maxX}
-                step="1"
-                value={Math.round(selectedObject.x)}
-                disabled={saving || geometryLocked}
-                onChange={(event) => onObjectField("x", Number(event.target.value))}
-              />
-            </label>
-            <label>
-              Y
-              <input
-                type="number"
-                min="0"
-                max={maxY}
-                step="1"
-                value={Math.round(selectedObject.y)}
-                disabled={saving || geometryLocked}
-                onChange={(event) => onObjectField("y", Number(event.target.value))}
-              />
-            </label>
-            <label>
-              W
-              <input
-                type="number"
-                min="40"
-                max={maxWidth}
-                step="1"
-                value={Math.round(selectedObject.width)}
-                disabled={saving || geometryLocked}
-                onChange={(event) => onObjectField("width", Number(event.target.value))}
-              />
-            </label>
-            <label>
-              H
-              <input
-                type="number"
-                min="40"
-                max={maxHeight}
-                step="1"
-                value={Math.round(selectedObject.height)}
-                disabled={saving || geometryLocked}
-                onChange={(event) => onObjectField("height", Number(event.target.value))}
-              />
-            </label>
+          <div className="location-map-geometry-controls">
+            <div className="location-map-geometry-group">
+              <span className="location-map-geometry-title">Position</span>
+              <div className="location-map-geometry-row">
+                <label>
+                  <span>X</span>
+                  <input
+                    type="number"
+                    min="0"
+                    max={maxX}
+                    step="1"
+                    value={Math.round(selectedObject.x)}
+                    aria-label="X position"
+                    disabled={saving || geometryLocked}
+                    onChange={(event) => onObjectField("x", Number(event.target.value))}
+                  />
+                </label>
+                <label>
+                  <span>Y</span>
+                  <input
+                    type="number"
+                    min="0"
+                    max={maxY}
+                    step="1"
+                    value={Math.round(selectedObject.y)}
+                    aria-label="Y position"
+                    disabled={saving || geometryLocked}
+                    onChange={(event) => onObjectField("y", Number(event.target.value))}
+                  />
+                </label>
+              </div>
+            </div>
+            <div className="location-map-geometry-group">
+              <span className="location-map-geometry-title">Size</span>
+              <div className="location-map-geometry-row">
+                <label>
+                  <span>W</span>
+                  <input
+                    type="number"
+                    min="40"
+                    max={maxWidth}
+                    step="1"
+                    value={Math.round(selectedObject.width)}
+                    aria-label="Width"
+                    disabled={saving || geometryLocked}
+                    onChange={(event) => onObjectField("width", Number(event.target.value))}
+                  />
+                </label>
+                <label>
+                  <span>H</span>
+                  <input
+                    type="number"
+                    min="40"
+                    max={maxHeight}
+                    step="1"
+                    value={Math.round(selectedObject.height)}
+                    aria-label="Height"
+                    disabled={saving || geometryLocked}
+                    onChange={(event) => onObjectField("height", Number(event.target.value))}
+                  />
+                </label>
+              </div>
+            </div>
           </div>
           {geometryLocked ? (
             <p className="location-map-muted location-map-lock-note">
diff --git a/frontend/src/styles/pages/LocationMapManager.css b/frontend/src/styles/pages/LocationMapManager.css
index b5afe21..e07e2b7 100644
--- a/frontend/src/styles/pages/LocationMapManager.css
+++ b/frontend/src/styles/pages/LocationMapManager.css
@@ -610,10 +610,55 @@
   padding: 0;
 }
 
-.location-map-object-grid {
+.location-map-geometry-controls {
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 0.45rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.5rem;
+}
+
+.location-map-geometry-group {
+  display: grid;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.location-map-geometry-title {
+  color: #cbd5e1;
+  font-size: 0.78rem;
+  font-weight: 900;
+}
+
+.location-map-geometry-row {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.35rem;
+}
+
+.location-map-geometry-row label {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.3rem 0.45rem;
+  border: 1px solid var(--color-border-light);
+  border-radius: 8px;
+  background: rgba(15, 23, 34, 0.58);
+  color: #f8fafc;
+}
+
+.location-map-geometry-row label span {
+  flex: 0 0 auto;
+  min-width: 1.1rem;
+  color: #9fb3c8;
+  font-size: 0.76rem;
+  font-weight: 900;
+}
+
+.location-map-geometry-row input {
+  min-width: 0;
+  min-height: 34px;
+  padding: 0.35rem 0.4rem;
+  text-align: center;
 }
 
 .location-map-lock-note {
@@ -843,7 +888,7 @@
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .location-map-object-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+  .location-map-geometry-controls {
+    gap: 0.45rem;
   }
 }
diff --git a/frontend/tests/location-map-manager.spec.ts b/frontend/tests/location-map-manager.spec.ts
index 2449b6b..83ce83d 100644
--- a/frontend/tests/location-map-manager.spec.ts
+++ b/frontend/tests/location-map-manager.spec.ts
@@ -2028,6 +2028,14 @@ test("mobile editor uses bottom sheet controls instead of desktop object toolbar
   const labelInput = page.getByRole("textbox", { name: "Label" });
   await expect(labelInput).toBeVisible();
   await expect(page.locator(".location-map-sheet-header strong")).toHaveText("Bakery");
+  const geometryControls = page.locator(".location-map-geometry-controls");
+  await expect(geometryControls).toBeVisible();
+  await expect(geometryControls.getByText("Position")).toBeVisible();
+  await expect(geometryControls.getByText("Size")).toBeVisible();
+  await expect(page.getByLabel("X position")).toHaveValue("40");
+  await expect(page.getByLabel("Y position")).toHaveValue("40");
+  await expect(page.getByLabel("Width")).toHaveValue("260");
+  await expect(page.getByLabel("Height")).toHaveValue("160");
   const selectedPrimaryActions = page.locator(".location-map-selected-primary-actions");
   const selectedSecondaryActions = page.locator(".location-map-selected-secondary-actions");
   await expect(selectedPrimaryActions.getByRole("button", { name: "Save Draft" })).toBeVisible();
@@ -2042,6 +2050,12 @@ test("mobile editor uses bottom sheet controls instead of desktop object toolbar
     throw new Error("Selected object draft actions were not measurable");
   }
   expect(selectedPrimaryBox.y).toBeLessThan(labelBox.y);
+  const geometryBox = await geometryControls.boundingBox();
+  expect(geometryBox).not.toBeNull();
+  if (!geometryBox) {
+    throw new Error("Geometry controls were not measurable");
+  }
+  expect(geometryBox.height).toBeLessThanOrEqual(92);
   await page.getByRole("button", { name: "Done" }).click();
   await expect(page.getByRole("textbox", { name: "Label" })).toHaveCount(0);
   await expect(page.locator(".location-map-sheet-header strong")).toHaveText("Edit Objects");