Feat/99/drag details view to close#185
Conversation
|
Someone is attempting to deploy a commit to the Valery Buchinsky's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…rscroll-to-close functionality
…adjustment in MessageDetailView
…ld and prevent pull-to-refresh on mobile
…nd opacity transitions
|
@bancho22 I tested it on mobile. Experience is much improved compared to before. It's still not ideal but good enough for in-browser thing. Really well done! A small remark I have is that maybe we don't need it to be draggable on desktop but... this is actually completely ignorable. |
There was a problem hiding this comment.
Pull request overview
This PR implements mobile-friendly drag-to-close functionality for the message details view and improves the mobile user experience when viewing message details with the map. The changes address requirements from Issue #99 (making the entire details view draggable to close, not just the small handle) and Issue #148 (keeping the map visible on mobile when the details view is open).
Changes:
- Enhanced details view with full-panel drag-to-close, overscroll-to-close, and dynamic height expansion (50vh → 90vh on scroll/swipe)
- Added mobile-specific map centering with automatic pan offset to keep pins visible above the details panel
- Restructured page layout to conditionally hide events list and footer on mobile when details are open, keeping the map visible
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 12 comments.
Show a summary per file
| File | Description |
|---|---|
web/lib/hooks/useMapNavigation.ts |
Added mobile-specific map pan offset after centering to keep pins visible above the details panel |
web/components/MessageDetailView/MessageDetailView.tsx |
Implemented complex drag/scroll logic with overscroll-to-close, dynamic height expansion, and dual drag systems for header and content |
web/components/MessageDetailView/Header.tsx |
Made entire header draggable instead of just the small handle, improving mobile UX |
web/components/HomeContent.tsx |
Added conditional rendering to hide events list and footer on mobile when details view is open |
web/components/Footer.tsx |
Added optional className prop for conditional styling |
web/components/ClientLayout.tsx |
Moved Footer out of global layout to allow per-page control |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Handles the mobile requirements of #148 as well as #99