I'm debugging the Atom-editor, a user reported that buttons get stacked oddly if the window size becomes too small.
Note that in Atom, people are allowed to write plugins, and that the markup will differ per plugin.
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn">One</button>
<button class="btn">Two</button>
<button class="btn">Three</button>
</div>
<div class="btn-group">
<button class="btn">Four</button>
<button class="btn">Five</button>
</div>
<button class="btn">Six</button>
<button class="btn">Seven</button>
</div>
I've added a margin-bottom to all immediate children of the element, fixing part of the issue. See the .less
below.
@import 'ui-variables';
.btn-toolbar > * {
// @component-padding is 10px, for the people who don't know less.
margin-bottom: @component-padding/2;
}
However, as you can see there's still some whitespace at the second line that shouldn't be there. It's the margin-left of a .btn-group
(buttons have this too, but there are only .btn-group
elements shown misbehaving in the image).
Is there any way to remove that margin? I googled for selecting any newline, but all I found was the ::first-line
pseudoclass. Which is obviously not useful here.