On mobile, directions and settings overlap each other and user interface elements are not sufficiently reachable

[georg-d]

When I open valhalla.openstreetmap.de on Android 10 in Ecosia 4.4.1 (AFAIK chromium based) or FireFox 98.3.0, it looks like this:

Issues

• The initial size of "directions" is wider than screen, i.e. one must zoom out via inverted squeeze-gesture (done for the screenshot) XOR move to the right by swipe gesture, then the right part of the dialog appears – which is especially important to toggle "settings" dialog. The gesture must be executed on the dialog and not the map to have the desired effect. I would expect a dialog that is not wider than viewport (preferred by me because less interaction required to use the website) XOR also the map as wide as the dialogs so it looks consistent (not preferred as both would be wider than viewport thus some parts are initially hidden).
• "settings" dialog starts left of viewport. I would expect at least x=0 or even a little higher.
• "settings" dialog is always behind "directions" dialog, thus unusable. I would expect "settings" appears on top of "directions" as "settings" can be closed via X button and opened again from "directions" dialog, XOR "settings" is vertically (not layer) below/above the map and "settings".
• most of the tools on the right are behind "directions" and thus not usable. I would expect "directions" dialog can be minimized/collapsed XOR is vertically above/below the map, so I can see a screen filling map and access the tools on the right.

[nilsnolde]

closing as duplicate of #15