UI polish - mobile UI implementation + improved Map panels #213
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
improve mobile nav
redesigned navigation and UI settings panel
… into fix/misc-ui-fixes
Fix/misc UI fixes
remove hard dependency on serverNode
remove reliance on servernode for OSM
extend node detail container downward more before using scroll bar
-fixed bug where clearDetailsPanel collapsed into bar -added helper function to clear node selection on "outside click" in mobile -reduced node detail panel size on mobile
- fixed gap at top of screen in mobile -moved mapbox map controls to right side
-fix: outer wrapper to full view-port height, children to h-full.
-fixed: make pt-14 conditional on non-map pages. This should remove blank space at top on mobile
Contributor
There was a problem hiding this comment.
Pull request overview
This PR implements comprehensive mobile UI improvements and map interface enhancements, addressing both UX polish and a critical bug fix for map initialization. The changes introduce a mobile-first drawer navigation system, repositioned and redesigned map controls, and improved fallback logic for map centering when the server node is unavailable.
Key changes:
- Mobile hamburger menu with slide-in drawer, backdrop overlay, and responsive theme toggle
- Unified bottom-right map control stack combining settings panel and legend with mobile toggle support
- Fixed bug where OSM and Mapbox maps wouldn't render without a valid serverNode by implementing fallback to any positioned node
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 10 comments.
| File | Description |
|---|---|
| frontend/src/pages/Map.tsx | Major refactor: adds settings panel persistence, mobile toggles, serverNode fallback logic, restructured UI panels (legend, settings, node details), and improved localStorage parsing |
| frontend/src/components/Menu.tsx | Implements mobile drawer navigation with backdrop overlay, separated mobile/desktop rendering, replaced icon images with inline SVG |
| frontend/src/components/Layout.tsx | Adds map-specific viewport handling using dvh units and conditional overflow management |
| .github/workflows/ghcr.yml | New workflow for building and pushing Docker images to GitHub Container Registry for both API and SPA |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
-added escape to close for mobile (in environments like tablets with keyboards)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR focuses on UI/UX improvements primarily, with a bug fix. If stable, this will be a good v0.2.0 candidate.
Menu for Mobile
Moved mobile hamburger into drawer with compact header, slide-in panel, backdrop overlay, and theme toggle
Map UI
Bug fix