Collapse sidebar on narrow screens
Description
When opening iD in a device with a narrow screen, the sidebar appears automatically even though it is empty, occupying precious real estate:
IMO it should automatically be loaded in the collapsed state when the container is narrow:
As an example of existing behavior that matches the expectation, the toolbar buttons already adopt a more compact display in narrower screens by omitting the labels and showing just the icons, which IMO is sensible behavior:
| Wide screen | Narrow screen |
|---|---|
I would gladly contribute a PR making the sidebar also auto-collapse in narrow screens, if there's agreement that this is desirable, and if I can get some guidance on how to do it — I suppose one needs to do something like, say selection.classed('collapsed', containerWidth < 600); (or whatever pixel width we consider narrow enough) somewhere when initializing the sidebar?
Hello !! I think my PR will be able to solve the issue !!
It could be confusing for users when the sidebar is (sometimes) completely collapsed: In order to edit the properties one must now, after selecting the feature, also click on the top-left button to open the sidebar again.
I think it would be better to revisit the UI concept from #7496: essentially just removing the gray search box as long as no search results are to be displayed (and no OSM feature is selected) should make the map much more usable on narrow screens.