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

fix: stabilize mobile map toolbar

Browse Source
This commit is contained in:
Nico 2026-06-04 20:06:50 -07:00
parent 4e276797c6
commit a7a4a8714a
2 changed files with 122 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -986,6 +986,83 @@
}
@media (max-width: 839px) {
.location-map-toolbar {
--location-map-mode-slot: clamp(132px, 24vw, 188px);
--location-map-history-slot: 84px;
display: grid;
grid-template-columns: var(--location-map-mode-slot) minmax(0, 1fr);
align-items: center;
justify-content: stretch;
column-gap: 0.35rem;
row-gap: 0.4rem;
padding: 0.55rem 0.65rem;
}
.location-map-toolbar.has-history-slot {
grid-template-columns: var(--location-map-mode-slot) var(--location-map-history-slot) minmax(0, 1fr);
}
.location-map-mode-group {
grid-column: 1;
width: var(--location-map-mode-slot);
max-width: var(--location-map-mode-slot);
min-width: 0;
}
.location-map-mode-buttons {
width: var(--location-map-mode-slot);
max-width: var(--location-map-mode-slot);
min-width: 0;
padding: 0.18rem;
box-sizing: border-box;
}
.location-map-mode-buttons button {
flex: 1 1 0;
min-width: 0;
min-height: 40px;
padding: 0.35rem 0.42rem;
}
.location-map-history-buttons {
grid-column: 2;
gap: 0;
width: var(--location-map-history-slot);
justify-self: center;
}
.location-map-history-buttons button {
min-width: 40px;
min-height: 40px;
padding-inline: 0.35rem;
}
.location-map-zoom-controls {
grid-column: 2;
gap: 0.05rem;
margin-left: 0;
justify-self: end;
}
.location-map-toolbar.has-history-slot .location-map-zoom-controls {
grid-column: 3;
}
.location-map-zoom-controls button {
min-width: 40px;
min-height: 40px;
padding: 0.3rem;
}
.location-map-zoom-controls span {
min-width: 34px;
font-size: 0.82rem;
}
.location-map-tool-buttons {
display: none;
}
.location-map-bottom-sheet {
max-height: 34dvh;
}
@ -1058,43 +1135,13 @@
}
.location-map-toolbar {
--location-map-mode-slot: 124px;
--location-map-mode-slot: 132px;
--location-map-history-slot: 84px;
display: grid;
grid-template-columns: var(--location-map-mode-slot) minmax(0, 1fr);
align-items: center;
justify-content: stretch;
column-gap: 0.15rem;
row-gap: 0.35rem;
padding: 0.35rem 0.25rem;
}
.location-map-toolbar.has-history-slot {
grid-template-columns: var(--location-map-mode-slot) var(--location-map-history-slot) minmax(0, 1fr);
}
.location-map-mode-group {
grid-column: 1;
width: var(--location-map-mode-slot);
max-width: var(--location-map-mode-slot);
min-width: 0;
}
.location-map-mode-buttons {
width: var(--location-map-mode-slot);
max-width: var(--location-map-mode-slot);
min-width: 0;
padding: 0.18rem;
box-sizing: border-box;
}
.location-map-mode-buttons button {
flex: 1 1 0;
min-width: 0;
min-height: 40px;
padding: 0.35rem 0.42rem;
}
.location-map-label-full {
display: none;
}
@ -1103,43 +1150,8 @@
display: inline;
}
.location-map-history-buttons {
grid-column: 2;
gap: 0;
width: var(--location-map-history-slot);
justify-self: center;
}
.location-map-history-buttons button {
min-width: 40px;
min-height: 40px;
padding-inline: 0.35rem;
}
.location-map-zoom-controls {
grid-column: 2;
gap: 0.05rem;
margin-left: 0;
justify-self: end;
}
.location-map-toolbar.has-history-slot .location-map-zoom-controls {
grid-column: 3;
}
.location-map-zoom-controls button {
min-width: 40px;
min-height: 40px;
padding: 0.3rem;
}
.location-map-zoom-controls span {
min-width: 28px;
font-size: 0.82rem;
}
.location-map-tool-buttons {
display: none;
}
.location-map-display-controls {

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

@ -1437,8 +1437,8 @@ test("mobile keeps viewing draft status compact in the topbar", async ({ page })
expect(statusBox.y).toBeLessThan(titleBox.y + titleBox.height);
expect(statusBox.x).toBeGreaterThan(titleBox.x);
expect(toolbarBox.height).toBeLessThanOrEqual(64);
expect(modeBox.width).toBeGreaterThanOrEqual(122);
expect(modeBox.width).toBeLessThanOrEqual(126);
expect(modeBox.width).toBeGreaterThanOrEqual(130);
expect(modeBox.width).toBeLessThanOrEqual(136);
expect(reservedHistoryBox.width).toBeGreaterThanOrEqual(82);
expect(reservedHistoryBox.x).toBeGreaterThan(modeBox.x + modeBox.width - 1);
await expect(historyActions).toHaveCSS("visibility", "hidden");
@ -1468,8 +1468,8 @@ test("mobile keeps viewing draft status compact in the topbar", async ({ page })
expect(Math.abs(editModeBox.x - modeBox.x)).toBeLessThanOrEqual(1);
expect(Math.abs(editModeGroupBox.width - modeGroupBox.width)).toBeLessThanOrEqual(1);
expect(Math.abs(editModeBox.width - modeBox.width)).toBeLessThanOrEqual(1);
expect(editModeBox.width).toBeGreaterThanOrEqual(122);
expect(editModeBox.width).toBeLessThanOrEqual(126);
expect(editModeBox.width).toBeGreaterThanOrEqual(130);
expect(editModeBox.width).toBeLessThanOrEqual(136);
expect(Math.abs(editHistoryBox.width - reservedHistoryBox.width)).toBeLessThanOrEqual(1);
expect(editHistoryBox.x).toBeGreaterThan(editModeBox.x + editModeBox.width);
expect(editZoomBox.x).toBeGreaterThan(editHistoryBox.x + editHistoryBox.width);
@ -1528,8 +1528,8 @@ test("narrow mobile toolbar keeps map controls tappable without overflow", async
expect(toolbarBox.x).toBeGreaterThanOrEqual(0);
expect(toolbarBox.x + toolbarBox.width).toBeLessThanOrEqual(361);
expect(modeBox.width).toBeGreaterThanOrEqual(122);
expect(modeBox.width).toBeLessThanOrEqual(126);
expect(modeBox.width).toBeGreaterThanOrEqual(130);
expect(modeBox.width).toBeLessThanOrEqual(136);
expect(modeBox.x + modeBox.width).toBeLessThanOrEqual(historyBox.x);
expect(zoomBox.y).toBeGreaterThan(modeBox.y + modeBox.height - 1);
expect(zoomBox.x).toBeGreaterThanOrEqual(toolbarBox.x);
@ -3898,6 +3898,44 @@ test("compact tablet map starts fitted on first load", async ({ page }) => {
});
await page.goto("/stores/100/locations/10/map");
const toolbar = page.locator(".location-map-toolbar");
const modeButtons = page.locator(".location-map-mode-buttons");
const historyActions = page.locator(".location-map-history-buttons");
const zoomControls = page.locator(".location-map-zoom-controls");
const viewModeBox = await modeButtons.boundingBox();
const reservedHistoryBox = await historyActions.boundingBox();
const viewZoomBox = await zoomControls.boundingBox();
expect(viewModeBox).not.toBeNull();
expect(reservedHistoryBox).not.toBeNull();
expect(viewZoomBox).not.toBeNull();
if (!viewModeBox || !reservedHistoryBox || !viewZoomBox) {
throw new Error("Compact tablet toolbar layout was not measurable");
}
expect(viewModeBox.width).toBeGreaterThanOrEqual(180);
expect(viewModeBox.width).toBeLessThanOrEqual(190);
await expect(historyActions).toHaveCSS("visibility", "hidden");
expect(reservedHistoryBox.x).toBeGreaterThan(viewModeBox.x + viewModeBox.width - 1);
expect(viewZoomBox.x).toBeGreaterThan(reservedHistoryBox.x + reservedHistoryBox.width - 1);
await page.getByRole("button", { name: "Edit Draft" }).click();
await expect(historyActions).toHaveCSS("visibility", "visible");
const toolbarBox = await toolbar.boundingBox();
const editModeBox = await modeButtons.boundingBox();
const editHistoryBox = await historyActions.boundingBox();
const editZoomBox = await zoomControls.boundingBox();
expect(toolbarBox).not.toBeNull();
expect(editModeBox).not.toBeNull();
expect(editHistoryBox).not.toBeNull();
expect(editZoomBox).not.toBeNull();
if (!toolbarBox || !editModeBox || !editHistoryBox || !editZoomBox) {
throw new Error("Compact tablet edit toolbar layout was not measurable");
}
expect(Math.abs(editModeBox.x - viewModeBox.x)).toBeLessThanOrEqual(1);
expect(Math.abs(editModeBox.width - viewModeBox.width)).toBeLessThanOrEqual(1);
expect(editHistoryBox.x).toBeGreaterThan(editModeBox.x + editModeBox.width - 1);
expect(editZoomBox.x).toBeGreaterThan(editHistoryBox.x + editHistoryBox.width - 1);
expect(editZoomBox.x + editZoomBox.width).toBeLessThanOrEqual(toolbarBox.x + toolbarBox.width + 1);
await expectMapFitsCanvas(page, 75, "Compact tablet");
});