atom/atom — pull request #2830 by Azeirah (2014-07-05 00:44:18+00:00)
Title: Fix ugly buttons issue in .btn-toolbar on resizing

> This is not the fault of this package, it's the `.btn-toolbar` that's doing something weird, even when the tree-view is not visible.

> For example, see the atom styleguide here, it does it too.
> ![onpaste 20140705-012253](https://cloud.githubusercontent.com/assets/4040870/3485306/41d828e8-03d2-11e4-8238-d56abde42181.png)

> Edit: I tried this in my `stylesheet.less`, it works ok, except that any line but the first has a margin-left of `@component-padding/2`. I have not found a way to get around this issue, it's a little bit better at least.

```
@import 'ui-variables';

.btn-toolbar > * {
margin-bottom: @component-padding/2;
}
```

> ![onpaste 20140705-015349](https://cloud.githubusercontent.com/assets/4040870/3485367/7c925946-03d6-11e4-82d3-e648ce405034.png)

> The issue actually lies at [`atom/static/buttons.less@.btn-toolbar`](https://github.com/atom/atom/blob/master/static/buttons.less#L66), adding the margin-bottom there would fix half of the problem, it's a little better, but not perfect yet.

> Edit: Fixed it, instead of using `margin-left`, use margin right for all `.btn`'s and `.btn-group`'s.

> It looks like this:

> ![onpaste 20140705-023826](https://cloud.githubusercontent.com/assets/4040870/3485439/b9a5b822-03dc-11e4-968b-2df5d015c555.png)

[Original answer here](https://github.com/atom/settings-view/issues/145#issuecomment-48074219)