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

fix: compact mobile map toolbar

Browse Source
This commit is contained in:
Nico 2026-06-04 13:40:08 -07:00
parent a862eba0fa
commit 10d442698b
2 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -959,8 +959,8 @@
}
.location-map-toolbar {
--location-map-mode-slot: 148px;
--location-map-history-slot: 80px;
--location-map-mode-slot: 136px;
--location-map-history-slot: 76px;
display: grid;
grid-template-columns: var(--location-map-mode-slot) minmax(0, 1fr);
align-items: center;
@ -1007,7 +1007,7 @@
.location-map-history-buttons {
grid-column: 2;
gap: 0;
width: 80px;
width: var(--location-map-history-slot);
justify-self: center;
}
@ -1031,11 +1031,11 @@
.location-map-zoom-controls button {
min-width: 40px;
min-height: 40px;
padding: 0.35rem;
padding: 0.3rem;
}
.location-map-zoom-controls span {
min-width: 30px;
min-width: 28px;
font-size: 0.82rem;
}
@ -1050,15 +1050,15 @@
@media (max-width: 380px) {
.location-map-toolbar {
grid-template-columns: var(--location-map-mode-slot, 144px) var(--location-map-history-slot, 80px);
grid-template-columns: var(--location-map-mode-slot, 136px) var(--location-map-history-slot, 76px);
}
.location-map-toolbar.has-history-slot {
grid-template-columns: var(--location-map-mode-slot, 144px) var(--location-map-history-slot, 80px);
grid-template-columns: var(--location-map-mode-slot, 136px) var(--location-map-history-slot, 76px);
}
.location-map-history-buttons {
width: 80px;
width: var(--location-map-history-slot, 76px);
}
.location-map-history-buttons button,

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

@ -793,8 +793,8 @@ test("mobile keeps draft preview 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(146);
expect(modeBox.width).toBeLessThanOrEqual(150);
expect(modeBox.width).toBeGreaterThanOrEqual(134);
expect(modeBox.width).toBeLessThanOrEqual(138);
expect(reservedHistoryBox.width).toBeGreaterThanOrEqual(70);
expect(reservedHistoryBox.x).toBeGreaterThan(modeBox.x + modeBox.width - 1);
await expect(historyActions.getByRole("button", { name: "Undo" })).toBeVisible();
@ -824,8 +824,8 @@ test("mobile keeps draft preview 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(146);
expect(editModeBox.width).toBeLessThanOrEqual(150);
expect(editModeBox.width).toBeGreaterThanOrEqual(134);
expect(editModeBox.width).toBeLessThanOrEqual(138);
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);
@ -884,8 +884,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(146);
expect(modeBox.width).toBeLessThanOrEqual(150);
expect(modeBox.width).toBeGreaterThanOrEqual(134);
expect(modeBox.width).toBeLessThanOrEqual(138);
expect(modeBox.x + modeBox.width).toBeLessThanOrEqual(historyBox.x);
expect(zoomBox.y).toBeGreaterThan(modeBox.y + modeBox.height - 1);
expect(zoomBox.x).toBeGreaterThanOrEqual(toolbarBox.x);