Map not very usable for smartphones

Summary

When using the map on a screen with a width smaller or equal to 690px, the map toggle button box is too small to use for most people.

Steps to reproduce

Use a screen with pixel width < 690px and try to toggle the view of different map elements.

What is the current bug behavior?

While it is possible to use the map on a small screen device (if you know how to), a normal user will not try to fiddle around until they can handle the invisible and scroll the portion of the box into view with horizontal scrolling. People avoid using the map in mobile view.

690px is also the width where the foodsharing logo dissapears in the top left corner.

What is the expected correct behavior?

The box should be an expandable drawer in small screen conditions, so toggling is possible for any user.

Relevant error messages and/or screenshots

This issue was first mentioned on https://gitlab.com/foodsharing-dev/issues0/issues/247#note_44131695