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

fix: stabilize map toolbar controls

Browse Source
This commit is contained in:
Nico 2026-06-04 09:49:20 -07:00
parent aff9b2cac9
commit 95ac122266
2 changed files with 27 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -307,6 +307,12 @@
cursor: grabbing;
}
.location-map-object:not(.is-selected):hover rect:first-child {
fill: rgba(37, 99, 141, 0.88);
stroke: rgba(147, 197, 253, 0.9);
stroke-width: 3;
}
.location-map-object rect:first-child:focus-visible {
outline: none;
stroke: #bfdbfe;
@ -878,8 +884,10 @@
}
.location-map-toolbar {
--location-map-mode-slot: clamp(144px, 37vw, 164px);
--location-map-history-slot: 80px;
display: grid;
grid-template-columns: 136px minmax(0, 1fr);
grid-template-columns: var(--location-map-mode-slot) minmax(0, 1fr);
align-items: center;
justify-content: stretch;
column-gap: 0.15rem;
@ -888,7 +896,7 @@
}
.location-map-toolbar.has-history-slot {
grid-template-columns: 136px 80px minmax(0, 1fr);
grid-template-columns: var(--location-map-mode-slot) var(--location-map-history-slot) minmax(0, 1fr);
}
.location-map-mode-group {
@ -939,7 +947,7 @@
.location-map-zoom-controls {
grid-column: 2;
gap: 0.12rem;
gap: 0.05rem;
margin-left: 0;
justify-self: end;
}
@ -955,7 +963,7 @@
}
.location-map-zoom-controls span {
min-width: 36px;
min-width: 30px;
font-size: 0.82rem;
}
@ -970,11 +978,11 @@
@media (max-width: 380px) {
.location-map-toolbar {
grid-template-columns: minmax(0, 1fr) 80px;
grid-template-columns: var(--location-map-mode-slot, 144px) var(--location-map-history-slot, 80px);
}
.location-map-toolbar.has-history-slot {
grid-template-columns: minmax(0, 1fr) 80px;
grid-template-columns: var(--location-map-mode-slot, 144px) var(--location-map-history-slot, 80px);
}
.location-map-history-buttons {

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

@ -790,7 +790,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).toBeLessThanOrEqual(150);
expect(modeBox.width).toBeGreaterThanOrEqual(142);
expect(modeBox.width).toBeLessThanOrEqual(166);
expect(reservedHistoryBox.width).toBeGreaterThanOrEqual(70);
expect(reservedHistoryBox.x).toBeGreaterThan(modeBox.x + modeBox.width - 1);
expect(zoomBox.y).toBeLessThan(modeBox.y + modeBox.height);
@ -816,6 +817,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(142);
expect(editModeBox.width).toBeLessThanOrEqual(166);
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);
@ -874,6 +877,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(142);
expect(modeBox.width).toBeLessThanOrEqual(166);
expect(modeBox.x + modeBox.width).toBeLessThanOrEqual(historyBox.x);
expect(zoomBox.y).toBeGreaterThan(modeBox.y + modeBox.height - 1);
expect(zoomBox.x).toBeGreaterThanOrEqual(toolbarBox.x);
@ -2458,8 +2463,15 @@ test("viewer map areas are keyboard selectable", async ({ page }) => {
const bakeryArea = page.getByRole("button", { name: "Map area Bakery" });
const frozenArea = page.getByRole("button", { name: "Map area Frozen Foods" });
const bakeryRect = page.locator('[data-object-key="1571"]').locator("rect").first();
await expect(bakeryArea).toHaveAttribute("aria-pressed", "false");
const initialFill = await bakeryRect.evaluate((element) => getComputedStyle(element).fill);
await bakeryRect.hover();
await expect.poll(async () => (
bakeryRect.evaluate((element) => getComputedStyle(element).fill)
)).not.toBe(initialFill);
await bakeryArea.focus();
await expect(bakeryArea).toBeFocused();
await page.keyboard.press("Enter");