<p></p>
<p>This is a reasonable fix. I think it has two drawbacks though.</p>
<p>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:</p>
<p><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/360803/107542810-7bcf2d00-6bc0-11eb-90fd-ec3f125bd6b7.png"><img src="https://user-images.githubusercontent.com/360803/107542810-7bcf2d00-6bc0-11eb-90fd-ec3f125bd6b7.png" alt="Screenshot from 2021-02-10 16-23-20" style="max-width:100%;"></a></p>
<p>So I think <code>mb-1</code> looks better:</p>
<p><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/360803/107542858-8b4e7600-6bc0-11eb-81ce-415af289e124.png"><img src="https://user-images.githubusercontent.com/360803/107542858-8b4e7600-6bc0-11eb-81ce-415af289e124.png" alt="Screenshot from 2021-02-10 16-23-45" style="max-width:100%;"></a></p>
<p>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).</p>
<p>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:</p>
<ul>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="98118917" data-permission-text="Title is private" data-url="https://github.com/twbs/bootstrap/issues/16912" data-hovercard-type="issue" data-hovercard-url="/twbs/bootstrap/issues/16912/hovercard" href="https://github.com/twbs/bootstrap/issues/16912">twbs/bootstrap#16912</a></li>
<li><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="281817154" data-permission-text="Title is private" data-url="https://github.com/twbs/bootstrap/issues/24997" data-hovercard-type="issue" data-hovercard-url="/twbs/bootstrap/issues/24997/hovercard" href="https://github.com/twbs/bootstrap/issues/24997">twbs/bootstrap#24997</a></li>
</ul>
<p>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.</p>
<p>In the <a href="https://getbootstrap.com/docs/4.6/components/buttons/" rel="nofollow">bootstrap buttons documentation</a> however, their buttons work fine (I'd still prefer a smaller gap of course <g-emoji class="g-emoji" alias="smile" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f604.png">😄</g-emoji>):</p>
<p><a target="_blank" rel="noopener noreferrer" href="https://user-images.githubusercontent.com/360803/107543717-61e21a00-6bc1-11eb-865b-863fc0a794f5.png"><img src="https://user-images.githubusercontent.com/360803/107543717-61e21a00-6bc1-11eb-865b-863fc0a794f5.png" alt="Screenshot from 2021-02-10 16-58-27" style="max-width:100%;"></a></p>
<p>It turns out they are "cheating" slightly, and have a special set of margins for the documentation:</p>
<p><a href="https://github.com/twbs/bootstrap/blob/ce8af15ad1a676239d08576138b7796cae6f133f/site/assets/scss/_component-examples.scss#L181-L186">https://github.com/twbs/bootstrap/blob/ce8af15ad1a676239d08576138b7796cae6f133f/site/assets/scss/_component-examples.scss#L181-L186</a></p>
<p>So I think we could do something similar, by having a <code>buttons-wrapper</code> 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?</p>
<p>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:</p>
<div class="highlight highlight-source-css-scss"><pre><span class="pl-c"><span class="pl-c">//</span> (explanatory comment about buttons and wrapping)</span>
<span class="pl-e">.button-wrapper</span> {
  > <span class="pl-e">.btn</span> {
    <span class="pl-c1"><span class="pl-c1">margin-bottom</span></span>: <span class="pl-v">$spacer</span> <span class="pl-k">*</span> <span class="pl-c1">.25</span>;
  }
}</pre></div>
<p>My SCSS skills aren't good enough to <a href="https://github.com/twbs/bootstrap-rubygem/blob/e9e5b38bbb88b7b28b902b172ed8c6382478ebd2/assets/stylesheets/bootstrap/_variables.scss#L130-L148">directly pluck the computed size out of the <code>$spacers</code> array</a> (something like <code>margin-bottom: $spacers[1]</code> if this was ruby - does that work in SCSS?) but further refinements would be welcome.</p>
<p>What do you think? Should we apply this to every button, or have a wrapper div? And what approach do you think is best?</p>

<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />You are receiving this because you are subscribed to this thread.<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/pull/3091#issuecomment-776871536">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLN6CPPETHV3SZS7E2LS6K5KRANCNFSM4XKCTT4A">unsubscribe</a>.<img src="https://github.com/notifications/beacon/AAK2OLJWY2TBB65ZVUKHL4DS6K5KRA5CNFSM4XKCTT4KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOFZHB44A.gif" height="1" width="1" alt="" /></p>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/pull/3091#issuecomment-776871536",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/3091#issuecomment-776871536",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>