<iron-dropdown> could deal with the css margin, so the dropdown content
would often be rendered beyond the border of the screen. So let's remove
that margin.
This results in the dropdown content being rendered at the top of the
dropdown button, thus obscuring it. I think iron-fit-behavior
conceptually targets positioning of elements *inside* others, not around
them. Both works, but you have to be a bit more careful.
The 'no-overlap' option comes to the rescue. It makes sure that the
dropdown content is either shifted down or to the right to avoid the
overlap. Shifting down in preferred (when it fits the screen), but for
larger content shifting right will be preferred, because it fits more
content on the screen. That does not look that great, so we prefer to
go all the way and enable 'dynamic-align': *If* the content fits, then
top-left alignment without overlap is used, otherwise the position is
chosen that shows most of the content.
Not sure whether this is the perfect solution, but it fixes the bug,
seems to work reasonably well and we will probably be replacing the
iron widgets in 2021 anyway. So let's not go deeper. :-)
Bug: Issue 7458
Change-Id: I80b993fa2e19dd9732717eecd39d503d9dc1b932
6c5ab97c82