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 }) => {