Responsive layout for small (phone) screens

[westnordost]

The app's layout is a bit of a mess on phone screens, see:

Notes / Possible solutions / Thoughts:

• https://maps.openrouteservice.org/#/ does the responsive-ness on small screens quite well but probably very different to this app. All the advanced features and options are hidden in a sidebar
• If the width is below a certain threshold, the floating-dialog-like box could become full-width (without margin and shadow), this saves a few pixels
• move the small buttons (delete, add, settings) to the bottom (and/or own row). This makes the whole dialog less broad
• just use the common "drag handle" icon for the drag handle, i.e. no numbers, not styled as a button. I think would also be better usability-wise, because it simply is no button and the concept+icon of drag handles is reasonably well understood E.g. like here https://magento.stackexchange.com/questions/272519/how-to-add-draggable-handle-for-configure-product-variants-in-magento-2
• if there is (still) not enough space, it is a common pattern to ellipsize the button bar at the top, the remaining transport modes being behind a "..." button (in a dropdown menu)
• the settings dialog should respect the boundaries of the main dialog, i.e. not appear behind it. If there is not enough space horizontally, it could go below the main dialog. It may be worth a thought to not show the settings dialog by default and/or only if the screen is wide enough

This feature request was triggered by https://github.com/streetcomplete/StreetComplete/issues/3905 , a request to add the valhalla demo to the list of useful OpenStreetMap showcase links in StreetComplete.

[TimMcCauley]

Hi @westnordost - thank you for raising this. Indeed, this should be done. Most of it can be solved with a bit of css. Let me dive in!

[georg-d]

While #18 is also about the mobile experience, it's not an exact dupe but rather about which details might be improved in which way - so maybe it's helpful to solve #15

[TimMcCauley]

We have been brainstorming a little about this. Going forward with this will take some time which we currently do not have. I found this library https://mui.com/material-ui/react-drawer/ which we now use for the range sliders, too. The drawers look pretty decent and they could help us move towards a responsive layout - thoughts? Is there anything you could and would like to pick up here @georg-d @westnordost ?

[westnordost]

Can't say anything about the technical side, but I do think that concept-wise, using a sidebar (aka drawer aka sheets) is a good way to build a layout that works well in a wide range of window sizes, especially when used in combination with a map.