Roadmap scaling and navigation UI/UX is broken on mobile #9724
Description
Detailed Description
Note
This issue is resolved in PR #9725.
Problem Description
On mobile devices with smaller screens, each roadmap is rendered in a desktop-oriented layout, which causes the nodes to shrink to a size that is extremely difficult to read and tap reliably. In practice, the only workable way to navigate the roadmap is to use browser-level pinch-zoom and drag-to-pan.
That creates an immediate problem for the primary interaction of opening a node modal. After zooming in to find and tap a node, the modal also appears zoomed in because the entire page has been scaled. This forces the user to zoom back out just to read the modal content.
When the modal is closed, the roadmap is now zoomed back out as well, so the user loses their place and has to zoom in again to continue navigating. The same problem also affects the rest of the page content, since browser-level zoom is not isolated to the roadmap.
This repeated cycle of zooming in to navigate the roadmap and zooming back out to read the node modal and other page content creates significant friction and makes the mobile experience much more disruptive than the intended desktop experience.