nalalangan/grocery-app
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

fix: stabilize mobile map toolbar widths

Browse Source
This commit is contained in:
Nico 2026-06-04 03:55:53 -07:00
parent 9390bfdf53
commit c945a71f45
3 changed files with 84 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
frontend/src/components/maps/LocationMapToolbar.jsx
View File

@ -24,7 +24,10 @@ export default function LocationMapToolbar({
const showHistoryControls = mode === "edit" && showHistorySlot;
return (
<section className="location-map-toolbar" aria-label="Map controls">
<section
className={`location-map-toolbar ${showHistorySlot ? "has-history-slot" : ""}`}
aria-label="Map controls"
>
<div className="location-map-mode-group">
<div className="location-map-mode-buttons" aria-label="Map mode">
<button
@ -50,55 +53,55 @@ export default function LocationMapToolbar({
</button>
) : null}
</div>
{showHistorySlot ? (
<div
className={`location-map-history-buttons ${showHistoryControls ? "" : "is-reserved"}`}
aria-label={showHistoryControls ? "Edit history" : undefined}
aria-hidden={showHistoryControls ? undefined : "true"}
>
<button
type="button"
onClick={onUndo}
disabled={!showHistoryControls || saving || history.length === 0}
aria-label="Undo"
tabIndex={showHistoryControls ? undefined : -1}
>
<span aria-hidden="true">&#8630;</span>
</button>
<button
type="button"
onClick={onRedo}
disabled={!showHistoryControls || saving || future.length === 0}
aria-label="Redo"
tabIndex={showHistoryControls ? undefined : -1}
>
<span aria-hidden="true">&#8631;</span>
</button>
</div>
) : null}
{mode === "edit" && canManage ? (
<div className="location-map-tool-buttons" aria-label="Edit tool">
<button
type="button"
className={editorTool === "pan" ? "active is-pan" : ""}
onClick={onPanMode}
disabled={saving}
aria-pressed={editorTool === "pan"}
>
Move Map
</button>
<button
type="button"
className={editorTool === "edit" ? "active is-edit" : ""}
onClick={onEditObjects}
disabled={saving}
aria-pressed={editorTool === "edit"}
>
Edit Areas
</button>
</div>
) : null}
</div>
{showHistorySlot ? (
<div
className={`location-map-history-buttons ${showHistoryControls ? "" : "is-reserved"}`}
aria-label={showHistoryControls ? "Edit history" : undefined}
aria-hidden={showHistoryControls ? undefined : "true"}
>
<button
type="button"
onClick={onUndo}
disabled={!showHistoryControls || saving || history.length === 0}
aria-label="Undo"
tabIndex={showHistoryControls ? undefined : -1}
>
<span aria-hidden="true">&#8630;</span>
</button>
<button
type="button"
onClick={onRedo}
disabled={!showHistoryControls || saving || future.length === 0}
aria-label="Redo"
tabIndex={showHistoryControls ? undefined : -1}
>
<span aria-hidden="true">&#8631;</span>
</button>
</div>
) : null}
{mode === "edit" && canManage ? (
<div className="location-map-tool-buttons" aria-label="Edit tool">
<button
type="button"
className={editorTool === "pan" ? "active is-pan" : ""}
onClick={onPanMode}
disabled={saving}
aria-pressed={editorTool === "pan"}
>
Move Map
</button>
<button
type="button"
className={editorTool === "edit" ? "active is-edit" : ""}
onClick={onEditObjects}
disabled={saving}
aria-pressed={editorTool === "edit"}
>
Edit Areas
</button>
</div>
) : null}
<div className="location-map-zoom-controls" aria-label="Zoom controls">
<button

30
frontend/src/styles/pages/LocationMapManager.css
View File

@ -107,7 +107,6 @@
.location-map-toolbar {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: 0.75rem;
@ -119,8 +118,6 @@
.location-map-mode-group {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.55rem;
min-width: 0;
}
@ -225,6 +222,10 @@
text-align: center;
}
.location-map-zoom-controls {
margin-left: auto;
}
.location-map-label-short {
display: none;
}
@ -839,21 +840,24 @@
}
.location-map-toolbar {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
flex-wrap: nowrap;
gap: 0.15rem;
padding: 0.35rem 0.25rem;
}
.location-map-toolbar.has-history-slot {
grid-template-columns: minmax(0, 1fr) 82px auto;
}
.location-map-mode-group {
flex: 0 0 auto;
grid-column: 1;
min-width: 0;
flex-wrap: nowrap;
gap: 0.15rem;
}
.location-map-mode-buttons {
flex: 0 0 120px;
width: 100%;
min-width: 0;
padding: 0.18rem;
}
@ -874,7 +878,7 @@
}
.location-map-history-buttons {
flex: 0 0 auto;
grid-column: 2;
gap: 0.12rem;
width: 82px;
}
@ -892,8 +896,14 @@
}
.location-map-zoom-controls {
flex: 0 0 auto;
grid-column: 2;
gap: 0.12rem;
margin-left: 0;
justify-self: end;
}
.location-map-toolbar.has-history-slot .location-map-zoom-controls {
grid-column: 3;
}
.location-map-zoom-controls button {

13
frontend/tests/location-map-manager.spec.ts
View File

@ -608,9 +608,20 @@ test("mobile keeps draft preview status compact in the topbar", async ({ page })
await expect(historyActions.getByRole("button", { name: "Undo" })).toBeVisible();
await expect(historyActions.getByRole("button", { name: "Redo" })).toBeVisible();
const editModeGroupBox = await modeGroup.boundingBox();
const editModeBox = await modeButtons.boundingBox();
const editHistoryBox = await historyActions.boundingBox();
const editZoomBox = await zoomControls.boundingBox();
expect(editModeGroupBox).not.toBeNull();
if (!editModeGroupBox) throw new Error("Mobile edit controls layout was not measurable");
expect(editModeBox).not.toBeNull();
expect(editHistoryBox).not.toBeNull();
expect(editZoomBox).not.toBeNull();
if (!editModeGroupBox || !editModeBox || !editHistoryBox || !editZoomBox) {
throw new Error("Mobile edit controls layout was not measurable");
}
expect(Math.abs(editModeGroupBox.width - modeGroupBox.width)).toBeLessThanOrEqual(1);
expect(Math.abs(editModeBox.width - modeBox.width)).toBeLessThanOrEqual(1);
expect(editHistoryBox.x).toBeGreaterThan(editModeBox.x + editModeBox.width);
expect(editZoomBox.x).toBeGreaterThan(editHistoryBox.x + editHistoryBox.width);
});
test("admin selecting an object does not mark a draft dirty until it changes", async ({ page }) => {