Items in select-list don't get floated

[idleberg]

Prerequisites

• [x] Put an X between the brackets on this line if you have done all of the following:
  • Reproduced the problem in Safe Mode: http://flight-manual.atom.io/hacking-atom/sections/debugging/#using-safe-mode
  • Followed all applicable steps in the debugging guide: http://flight-manual.atom.io/hacking-atom/sections/debugging/
  • Checked the FAQs on the message board for common solutions: https://discuss.atom.io/c/faq
  • Checked that your issue isn't already filed: https://github.com/issues?utf8=✓&q=is%3Aissue+user%3Aatom
  • Checked that there is not already an Atom package that provides the described functionality: https://atom.io/packages

Description

One of my Atom packages makes use of atom-select-list to display a select list similar to the following. Pay special attention to the floated badge.

<div class="select-list local-storage-list">
    <!-- omitting scrollview markup to keep it short -->

    <ol class="list-group">

        <li class="inline-block">
            <div class="icon icon-database">
                Example entry
                <div class="pull-right">
                  <span class="badge badge-info">true</span>
              </div>
          </div>
      </li>
  </ol>
</div>

Both, one-dark-ui and one-dark-light, display the select-list differently from about every other theme I've tried.

Atom Light:

One Light:

This is caused by the inline-block defined here and can be fixed by setting it to block. However, I'm unaware of the side-effects this might have.

.list-group .icon, .list-tree .icon {
    display: inline-block;
    height: inherit;
}

Steps to Reproduce

1. Create a package that uses select-list with markup similar to the snippet above (or simply install local-store
2. Invoke the select-list (or run Local Storage: Open Item)

Expected behavior: The badges should be floated right

Actual behavior: The badges aren't floated at all.

Reproduces how often: 100%

Versions

$ atom --version

Atom    : 1.27.2
Electron: 1.7.15
Chrome  : 58.0.3029.110
Node    : 7.9.0

$ apm --version

apm  1.19.0
npm  3.10.10
node 6.9.5 x64
atom 1.27.2
python 2.7.10
git 2.15.1

Additional Information

Tested on macOS 10.13.5 (17F77) & Windows 10 (Build 17134.48)

[simurai]

This should be fixed in Atom 1.31.

An alternative would be to not nest the .pull-right element inside the .icon:

<li class="inline-block">
  <div class="icon icon-database">
    Example entry
  </div>
  <div class="pull-right">
    <span class="badge badge-info">true</span>
  </div>
</li>