Make the plugin list inline-blocks to maintain layouts with long plugin titles

[Clorith]

By using inline-blocks over the current table/float approach on the plugins list, we can make the list look a bit nicer and less..."teenage bedroom floor", in the cases where plugin titles exceed 3 lines.

The downloads count also gets pushed around a little, I'm wondering if we should perhaps do something to give that a more solid ground, giving it a text-align: right helps a little if the titles are long enough, but on short titles it doens't look quite right.

.main-plugins ul li {
display: inline-block;
padding-right: 40px;
width: 200px;
min-height: 95px;
margin-bottom: 15px;
vertical-align: top;
}

The above is my proposed fix for the plugin list it self, as for the downloads a simple p.downloads { text-align: right; } handles the palcement there. I've attached a couple screenshots to show what I mean, I tested it on the profile page at ​https://profiles.wordpress.org/storeapps/

[Clorith]

The plugins list with the current float alignment

[Clorith]

The plugins list with the proposed inline block display

[Clorith]

Possible idea for download counter positioning?

[melchoyce]

Inline-block makes sense for a cleaner grid, but we shouldn't wrap the plugin titles around the icons — the icon should remain left and the title and download count should remain on the right. I also think we can tighten up the line-height a bit on both the title and download counter.

Here's the css I updated:

.main-plugins ul li {
    line-height: 1.4;
}

.main-plugins ul li h3 {
    margin: 2px 0 4px 0;
} 
/* Was just h3, but that feels so unspecific to me... I'd worry about it cascading */

Attachment incoming.

[iandunn]

Fixed in [dotorg9969].