diff --git a/frontend/src/components/maps/LocationMapToolbar.jsx b/frontend/src/components/maps/LocationMapToolbar.jsx
index 8ccec2a..84c1db7 100644
--- a/frontend/src/components/maps/LocationMapToolbar.jsx
+++ b/frontend/src/components/maps/LocationMapToolbar.jsx
@@ -31,8 +31,10 @@ export default function LocationMapToolbar({
disabled={!hasAnyMap}
onClick={onEdit}
aria-pressed={mode === "edit"}
+ aria-label="Edit Draft"
>
- Edit Draft
+ Edit Draft
+ Edit
) : null}
diff --git a/frontend/src/styles/pages/LocationMapManager.css b/frontend/src/styles/pages/LocationMapManager.css
index ae3b260..c171418 100644
--- a/frontend/src/styles/pages/LocationMapManager.css
+++ b/frontend/src/styles/pages/LocationMapManager.css
@@ -188,6 +188,10 @@
text-align: center;
}
+.location-map-label-short {
+ display: none;
+}
+
.location-map-canvas-shell {
min-height: 0;
min-width: 0;
@@ -616,21 +620,45 @@
}
.location-map-toolbar {
- flex-direction: column;
- align-items: stretch;
+ align-items: center;
+ flex-wrap: nowrap;
+ gap: 0.5rem;
+ padding: 0.5rem 0.65rem;
}
.location-map-mode-group,
- .location-map-mode-buttons,
- .location-map-tool-buttons,
- .location-map-zoom-controls {
+ .location-map-mode-buttons {
width: 100%;
+ min-width: 0;
}
- .location-map-mode-buttons button,
- .location-map-tool-buttons button,
- .location-map-zoom-controls button {
+ .location-map-mode-buttons button {
flex: 1 1 0;
+ min-width: 0;
+ padding-inline: 0.45rem;
+ }
+
+ .location-map-label-full {
+ display: none;
+ }
+
+ .location-map-label-short {
+ display: inline;
+ }
+
+ .location-map-zoom-controls {
+ flex: 0 0 auto;
+ gap: 0.3rem;
+ }
+
+ .location-map-zoom-controls button {
+ min-width: 40px;
+ padding-inline: 0.5rem;
+ }
+
+ .location-map-zoom-controls span {
+ min-width: 42px;
+ font-size: 0.82rem;
}
.location-map-tool-buttons {
diff --git a/frontend/tests/location-map-manager.spec.ts b/frontend/tests/location-map-manager.spec.ts
index de0e7b3..1493dc0 100644
--- a/frontend/tests/location-map-manager.spec.ts
+++ b/frontend/tests/location-map-manager.spec.ts
@@ -505,18 +505,31 @@ test("mobile keeps draft preview status compact in the topbar", async ({ page })
const topbar = page.locator(".location-map-topbar");
const status = page.locator(".location-map-status");
+ const toolbar = page.locator(".location-map-toolbar");
+ const modeButtons = page.locator(".location-map-mode-buttons");
+ const zoomControls = page.locator(".location-map-zoom-controls");
await expect(status).toHaveText("Draft Preview");
const topbarBox = await topbar.boundingBox();
const titleBox = await page.locator(".location-map-title").boundingBox();
const statusBox = await status.boundingBox();
+ const toolbarBox = await toolbar.boundingBox();
+ const modeBox = await modeButtons.boundingBox();
+ const zoomBox = await zoomControls.boundingBox();
expect(topbarBox).not.toBeNull();
expect(titleBox).not.toBeNull();
expect(statusBox).not.toBeNull();
- if (!topbarBox || !titleBox || !statusBox) throw new Error("Mobile topbar layout was not measurable");
+ expect(toolbarBox).not.toBeNull();
+ expect(modeBox).not.toBeNull();
+ expect(zoomBox).not.toBeNull();
+ if (!topbarBox || !titleBox || !statusBox || !toolbarBox || !modeBox || !zoomBox) {
+ throw new Error("Mobile map controls layout was not measurable");
+ }
expect(topbarBox.height).toBeLessThanOrEqual(66);
expect(statusBox.y).toBeLessThan(titleBox.y + titleBox.height);
expect(statusBox.x).toBeGreaterThan(titleBox.x);
+ expect(toolbarBox.height).toBeLessThanOrEqual(64);
+ expect(zoomBox.y).toBeLessThan(modeBox.y + modeBox.height);
});
test("admin selecting an object does not mark a draft dirty until it changes", async ({ page }) => {