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

fix: size mobile map actions for touch

Browse Source
This commit is contained in:
Nico 2026-06-04 06:41:12 -07:00
parent f86709f45e
commit 69488bb1ba
2 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -500,7 +500,7 @@
} }
.location-map-layer-reset { .location-map-layer-reset {
min-height: 36px; min-height: 40px;
padding: 0.35rem 0.65rem; padding: 0.35rem 0.65rem;
border: 1px solid var(--color-border-light); border: 1px solid var(--color-border-light);
border-radius: 999px; border-radius: 999px;
@ -564,7 +564,7 @@
.location-map-secondary-actions button { .location-map-secondary-actions button {
flex: 1 1 82px; flex: 1 1 82px;
min-height: 38px; min-height: 40px;
padding: 0.45rem 0.58rem; padding: 0.45rem 0.58rem;
background: rgba(21, 40, 59, 0.78); background: rgba(21, 40, 59, 0.78);
color: #dbeafe; color: #dbeafe;

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

@ -2628,6 +2628,22 @@ test("mobile editor uses bottom sheet controls instead of desktop object toolbar
expect(secondaryActionBox).not.toBeNull(); expect(secondaryActionBox).not.toBeNull();
if (!primaryActionBox || !secondaryActionBox) throw new Error("Mobile action groups were not measurable"); if (!primaryActionBox || !secondaryActionBox) throw new Error("Mobile action groups were not measurable");
expect(primaryActionBox.y).toBeLessThan(secondaryActionBox.y); expect(primaryActionBox.y).toBeLessThan(secondaryActionBox.y);
const secondaryActionButtons = secondaryActions.getByRole("button");
const secondaryActionButtonCount = await secondaryActionButtons.count();
for (let index = 0; index < secondaryActionButtonCount; index += 1) {
const actionButtonBox = await secondaryActionButtons.nth(index).boundingBox();
expect(actionButtonBox).not.toBeNull();
if (!actionButtonBox) throw new Error("Mobile secondary action was not measurable");
expect(actionButtonBox.height).toBeGreaterThanOrEqual(40);
}
await page.getByRole("button", { name: "Layers" }).click();
await page.getByRole("button", { name: "Pins" }).click();
const resetLayersButtonBox = await page.getByRole("button", { name: "Reset layer filters" }).boundingBox();
expect(resetLayersButtonBox).not.toBeNull();
if (!resetLayersButtonBox) throw new Error("Mobile layer reset button was not measurable");
expect(resetLayersButtonBox.height).toBeGreaterThanOrEqual(40);
await page.getByRole("button", { name: "Reset layer filters" }).click();
await page.getByRole("button", { name: "Layers" }).click();
await expect(page.locator(".location-map-pin")).toHaveCount(0); await expect(page.locator(".location-map-pin")).toHaveCount(0);
const canvasBox = await page.locator(".location-map-canvas-shell").boundingBox(); const canvasBox = await page.locator(".location-map-canvas-shell").boundingBox();
@ -2659,15 +2675,18 @@ test("mobile editor uses bottom sheet controls instead of desktop object toolbar
await expect(selectedSecondaryActions.getByRole("button", { name: "Preview Draft" })).toHaveCount(0); await expect(selectedSecondaryActions.getByRole("button", { name: "Preview Draft" })).toHaveCount(0);
await expect(page.getByRole("button", { name: "Bought" })).toHaveCount(0); await expect(page.getByRole("button", { name: "Bought" })).toHaveCount(0);
const selectedPrimaryBox = await selectedPrimaryActions.boundingBox(); const selectedPrimaryBox = await selectedPrimaryActions.boundingBox();
const selectedSecondaryButtonBox = await selectedSecondaryActions.getByRole("button", { name: "Add Area" }).boundingBox();
const labelBox = await labelInput.boundingBox(); const labelBox = await labelInput.boundingBox();
const firstFieldRowBox = await fieldRows.first().boundingBox(); const firstFieldRowBox = await fieldRows.first().boundingBox();
expect(selectedPrimaryBox).not.toBeNull(); expect(selectedPrimaryBox).not.toBeNull();
expect(selectedSecondaryButtonBox).not.toBeNull();
expect(labelBox).not.toBeNull(); expect(labelBox).not.toBeNull();
expect(firstFieldRowBox).not.toBeNull(); expect(firstFieldRowBox).not.toBeNull();
if (!selectedPrimaryBox || !labelBox || !firstFieldRowBox) { if (!selectedPrimaryBox || !selectedSecondaryButtonBox || !labelBox || !firstFieldRowBox) {
throw new Error("Selected object draft actions were not measurable"); throw new Error("Selected object draft actions were not measurable");
} }
expect(selectedPrimaryBox.y).toBeLessThan(labelBox.y); expect(selectedPrimaryBox.y).toBeLessThan(labelBox.y);
expect(selectedSecondaryButtonBox.height).toBeGreaterThanOrEqual(40);
expect(firstFieldRowBox.height).toBeLessThanOrEqual(54); expect(firstFieldRowBox.height).toBeLessThanOrEqual(54);
await page.getByRole("button", { name: "View" }).click(); await page.getByRole("button", { name: "View" }).click();
await expect(page.getByRole("textbox", { name: "Label" })).toHaveCount(0); await expect(page.getByRole("textbox", { name: "Label" })).toHaveCount(0);