Improve Route List Layout for Mobile Usability #228
Description
Description:
Currently, the route list view in Wayfinder is not optimized for small screens. When a user searches for routes, the list often overflows beyond the viewport, making it difficult to navigate. This issue impacts mobile usability and accessibility.
Steps to Reproduce:
Open Wayfinder on a mobile device or simulate a small screen in DevTools.
Search for a bus route with multiple results.
Notice how the list extends beyond the visible area, requiring excessive scrolling or zooming.
Expected Behavior:
The route list should be properly displayed within the viewport.
Scrolling should be smooth and intuitive.
The layout should adjust dynamically for different screen sizes.
Proposed Solution:
✅ Implement CSS Flexbox/Grid to structure the layout for better responsiveness.
✅ Introduce a collapsible list option for routes with many entries.
✅ Ensure proper padding/margins to improve readability.
✅ Add media queries to optimize touch-friendly interactions.
Why is this Important?
📌 This UI enhancement will significantly improve usability for mobile users.
📌 It aligns with Wayfinder’s goal of providing a seamless transit experience across devices.
📌 Improves accessibility by making navigation smoother for all users.
Would love feedback from maintainers on whether there are preferred UI patterns or frameworks to follow. I’d be happy to contribute a pull request to resolve this! 🚀