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

fix: add mobile map sheet handle

Browse Source
This commit is contained in:
Nico 2026-06-04 09:28:26 -07:00
parent 604025588e
commit aff9b2cac9
3 changed files with 21 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/components/maps/LocationMapBottomSheet.jsx
View File

@ -165,6 +165,7 @@ export default function LocationMapBottomSheet({
return ( return (
<aside className="location-map-bottom-sheet"> <aside className="location-map-bottom-sheet">
<div className="location-map-bottom-sheet-handle" aria-hidden="true" />
<div className="location-map-sheet-header"> <div className="location-map-sheet-header">
<div> <div>
<div className="location-map-sheet-heading"> <div className="location-map-sheet-heading">

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

@ -393,6 +393,7 @@
} }
.location-map-bottom-sheet { .location-map-bottom-sheet {
position: relative;
max-height: 43vh; max-height: 43vh;
overflow-y: auto; overflow-y: auto;
padding: 0.8rem clamp(0.75rem, 2vw, 1.25rem) 1rem; padding: 0.8rem clamp(0.75rem, 2vw, 1.25rem) 1rem;
@ -401,6 +402,10 @@
box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.28); box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.28);
} }
.location-map-bottom-sheet-handle {
display: none;
}
.location-map-sheet-header { .location-map-sheet-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -840,6 +845,16 @@
.location-map-bottom-sheet { .location-map-bottom-sheet {
max-height: 34dvh; max-height: 34dvh;
padding-top: 0.55rem;
}
.location-map-bottom-sheet-handle {
display: block;
width: 42px;
height: 4px;
margin: 0 auto 0.55rem;
border-radius: 999px;
background: rgba(148, 163, 184, 0.5);
} }
.location-map-topbar { .location-map-topbar {

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

@ -2659,11 +2659,15 @@ test("mobile editor uses bottom sheet controls instead of desktop object toolbar
const canvasBox = await page.locator(".location-map-canvas-shell").boundingBox(); const canvasBox = await page.locator(".location-map-canvas-shell").boundingBox();
const sheetBox = await page.locator(".location-map-bottom-sheet").boundingBox(); const sheetBox = await page.locator(".location-map-bottom-sheet").boundingBox();
const sheetHandleBox = await page.locator(".location-map-bottom-sheet-handle").boundingBox();
expect(canvasBox).not.toBeNull(); expect(canvasBox).not.toBeNull();
expect(sheetBox).not.toBeNull(); expect(sheetBox).not.toBeNull();
if (!canvasBox || !sheetBox) throw new Error("Mobile map layout was not measurable"); expect(sheetHandleBox).not.toBeNull();
if (!canvasBox || !sheetBox || !sheetHandleBox) throw new Error("Mobile map layout was not measurable");
expect(canvasBox.height).toBeGreaterThan(260); expect(canvasBox.height).toBeGreaterThan(260);
expect(sheetBox.height).toBeLessThanOrEqual(360); expect(sheetBox.height).toBeLessThanOrEqual(360);
expect(sheetHandleBox.width).toBeGreaterThanOrEqual(36);
expect(sheetHandleBox.height).toBeLessThanOrEqual(6);
await page.locator(".location-map-object", { hasText: "Bakery" }).locator("rect").first().click(); await page.locator(".location-map-object", { hasText: "Bakery" }).locator("rect").first().click();
const labelInput = page.getByRole("textbox", { name: "Label" }); const labelInput = page.getByRole("textbox", { name: "Label" });