[openstreetmap/openstreetmap-website] Fix unexpected spacing on note buttons when overflowed (#3091)

[Andy Allan]

This is a reasonable fix. I think it has two drawbacks though.

First is the size of the gap. When there are three buttons it looks like the vertical gap is much bigger than the gap between the buttons:

![Screenshot from 2021-02-10 16-23-20](https://user-images.githubusercontent.com/360803/107542810-7bcf2d00-6bc0-11eb-90fd-ec3f125bd6b7.png)

So I think `mb-1` looks better:

![Screenshot from 2021-02-10 16-23-45](https://user-images.githubusercontent.com/360803/107542858-8b4e7600-6bc0-11eb-81ce-415af289e124.png)

The second drawback is that we have the same problem in an unknown number of other places. It's common to have multiple buttons, and I think anywhere we have two or more buttons runs the risk of wrapping on small screens, depending on the language. And I don't want to us all to have to remember to add the margins utilities to every set of buttons, keep them consistent, and for new developers to have to figure out why they are there (wrapping in small screens in certain languages isn't so obvious, and we can't add a comment to ever situation).

Ideally, bootstrap would just do the right thing when buttons wrap, so that we don't have to think about it. So I did some research today to find out why they haven't. It's been raised at least twice:

* https://github.com/twbs/bootstrap/issues/16912
* https://github.com/twbs/bootstrap/issues/24997

The concern seems to be that since buttons are so widely used, they shouldn't have a bottom margin by default. I'm not sure that I would agree with that, but I respect their decision.

In the [bootstrap buttons documentation](https://getbootstrap.com/docs/4.6/components/buttons/) however, their buttons work fine (I'd still prefer a smaller gap of course :smile:):

![Screenshot from 2021-02-10 16-58-27](https://user-images.githubusercontent.com/360803/107543717-61e21a00-6bc1-11eb-865b-863fc0a794f5.png)

It turns out they are "cheating" slightly, and have a special set of margins for the documentation:

https://github.com/twbs/bootstrap/blob/ce8af15ad1a676239d08576138b7796cae6f133f/site/assets/scss/_component-examples.scss#L181-L186

So I think we could do something similar, by having a `buttons-wrapper` class that adds a margin to the buttons, and then we can use that wrapper every time we have a set of buttons. Or we could apply the bottom margin to all buttons by default, and override the few times that we don't want it?

Finally, if we set the margin in CSS, it would be nice to pick a size that adjusts automatically if the site-wide spacing utilities are adjusted (e.g. if a designer comes along and wants to change mb-1 to be a different width). So I think we can do that with something like:

```scss
// (explanatory comment about buttons and wrapping)
.button-wrapper {
  > .btn {
    margin-bottom: $spacer * .25;
  }
}
```

My SCSS skills aren't good enough to [directly pluck the computed size out of the `$spacers` array](https://github.com/twbs/bootstrap-rubygem/blob/e9e5b38bbb88b7b28b902b172ed8c6382478ebd2/assets/stylesheets/bootstrap/_variables.scss#L130-L148) (something like `margin-bottom: $spacers[1]` if this was ruby - does that work in SCSS?) but further refinements would be welcome.

What do you think? Should we apply this to every button, or have a wrapper div? And what approach do you think is best?


-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/3091#issuecomment-776871536
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20210210/22721c39/attachment.htm>