Because we are using an edge-to-edge layout for the flash messages,
the negative margins on the row were expanding the element offscreen.
Bootstrap provides a "no-gutter" class for removing these margins,
but that also drops the spacing between columns which we want to preserve.
So instead we use a margin override on the row only.
Additionally, drop some padding css in favour of a utility class
Fixes#3351
Bug was introduced in 3dd639c8d0
This avoids needing any floats. Also remove buttons class from two
locations, since there is a min-width on that class and it affects
the button styling negatively for standalone buttons
This makes future refactoring easier, since the elements will
retain their borders even if the hierarchy changes.
Also round some maps and the legale section since I think those now
look nicer.
Now that all uses of the images and thumbnails have been migrated
to flex grids, we can remove the margin and padding from the original
css classes and revert to using them.
The margins on the buttons aren't needed since the table has a bottom
margin, and the button class has never been applied since it was
incorrectly in the id field. The table row override had no effect since
the cells have their own vertical-alignment set.
Margin-top in particular is best avoided. The removal of some top
margins required a few corresponding changes to add bottom margins
to other features, mostly done by converting bare text strings to
live within paragraphs.
Currently the arm of the planet on https://www.openstreetmap.org/user/new is blocking pointer inputs on about a third of the email input field. This is solved by adding `pointer-events: none;` to the image.
Based on https://stackoverflow.com/a/31732902 this ensure that when
a secondary action list wraps the additional lines don't start with
an item delimiter by pushing it to the left, outside of a parent nav
element which then hides it.
This opens up many possibilities for more interesting things to be
shown on the dashboard, as well as making it easier to find if
you have lots of content in your profile.
The easiest way to do this is to make the text a child of the div
with the background image. The change to min-size is so that if
the text wraps often enough on narrow screens, the header expands
vertically rather than the text spilling over.
Fixes#3259
This fixes a glitch highlighted in #3259, where the css class stopped applying
when the view was moved to a different controller.
We're moving to having each view responsible for their layout, and commonly having
override classes explicitly in the relevant views. So we can follow that pattern here.
This saves every header, list, paragraph etc having to sort out their own padding. The couple of instances where we want edge-to-edge can be acheived using the negative margin spacing utilities.
The padding is based on $spacer so that it can be adjusted automatically via bootstrap configuration.
This also means that we can remove many (mis-)uses of the browse-section class, which is only supposed to be for cases where there are multiple browse-sections in sequence (e.g. multiple nodes in the node history browse pages).
I also reworked the layout to use flex utilities and avoid using a white button border as a spacing hack. In future this will be better done with start/end utilities, avoiding the need to be fancy with negative margins.
I started refatoring the export inputs to use a flex grid instead of
floats, but this is perhaps the one place on the whole site where left/right
makes sense since even in rtl we want min_lon on the left.
