I think pinned issues in issue lists take a lot of space and aren't very readable. I was wondering how they could be improved.

Before

<img width="1005" alt="" src="https://user-images.githubusercontent.com/1402241/83867665-1752f880-a72a-11ea-8b56-ca21b943208e.png">

After

<img width="997" alt="" src="https://user-images.githubusercontent.com/1402241/83867678-1d48d980-a72a-11ea-9b72-2f1a8aa55b68.png">

I achieved this using display: table to avoid having everything piled on on the left, but it might need to be reordered instead. Additional mockups welcome.

.js-pinned-issues-reorder-list {
    display: table!important;
    width: 100%;
    margin: 0;
    margin-bottom: 20px;
    padding: 0 !important;
}
.gutter>[class*=col-] {
    display: table-row !important;
}
.gutter>[class*=col-] > * {
    display: table-cell !important;
    padding: 2px 12px;
}

$('.js-pinned-issues-reorder-list').classList.add('border', 'border-gray-dark', 'rounded-1');

Incredibly their reordering widget keeps working even after this change