Mobile map layout and address/coordinate search (#49)#57
Conversation
On narrow layouts (<=900px) the header controls move onto the map: the view toggle and crosshair/patch controls become plain icon buttons in floating right-edge islands, and the control panel opens as a full-screen drawer via a menu button beside the logo.
A floating search box (top-center max 400px on desktop, full width on mobile) geocodes addresses via Nominatim and parses raw coordinates locally. Selecting a result or pressing Enter drops a point through the existing pick flow. Includes recent-search history, an empty state, and a "/" focus shortcut.
|
🚀 Vercel preview deployed Preview URL: https://earth-prints-ictjj8mtc-anastasiia-s-projects10.vercel.app |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a mobile-responsive layout for the map editor, including a slide-out controls drawer, floating map controls, and a geocoding-enabled search input with history persistence. The review feedback highlights several critical improvements: resolving an accessibility issue where the desktop sidebar is hidden from screen readers, preventing React hydration mismatches by deferring localStorage access to a client-side effect, avoiding shortcut conflicts with system modifier keys, disabling browser autocomplete on the search input, defensively handling non-array API responses, and adjusting tooltip positioning to prevent visual overlap.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
I was thinking that the time-series option should be after the
|
The hamburger trigger moves out of the header and onto the map's floating islands as a fingerprint button, and the mobile drawer now slides up from the bottom with a drag handle that closes it on tap, swipe or flick. Also trims the readout header down to one provenance line and locks the shell to svh so the sheet no longer overshoots the viewport.
|
@lazarusA all three are in:
Bonus while I was in there: the mobile drawer became a bottom sheet you can tap or swipe down to close, and the readout header lost the redundant FLUXCOM-X NEE badge. |
|
preview still shows the previous layout. |
|
@lazarusA it is now rebuilt |
2 participants
Implements the UI layout proposal from #49.
Mobile layout (<=900px)
MapReadout) opens as a full-screen drawer via a menu button placed to the left of the logo.Search
lat, loninput resolves locally./focus shortcut with keyboard navigation.Includes a merge of the latest
main.