Fix vertical alignment of icons

[BenjaminSchaaf]

Before:

After:

[kaste]

This seems wrong as there is no vertical-align: center;

On my machine after looks like

[michaelblyons]

Does it look okay if you change center to middle?

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/vertical-align

[BenjaminSchaaf]

Ah, vertical-align: center is a firefox-ism, and doesn't do the same as middle. Seems the modern approach is to use flexbox.

[BenjaminSchaaf]

I've pushed a fix for this.

[braver]

Icon sizing on the labels overview page needs a little help 😄

This might be the patch:

diff --git a/labels.njk b/labels.njk
index e95408b9..1f73a3c0 100644
--- a/labels.njk
+++ b/labels.njk
@@ -55,7 +55,7 @@ page_type: labels
           {% set icon_id = item.key | label_icon_id %}
           {% if icon_id %}
             {% set tint = item.key | label_icon_tint %}
-            <svg class="{{ (' label-icon--' ~ tint) if tint }}" aria-hidden="true">
+            <svg class="inline-icon {{ (' label-icon--' ~ tint) if tint }}" aria-hidden="true">
               <use href="/{{ 'static/label-icons.svg' | bust }}#{{ icon_id }}"></use>
             </svg>
           {% endif %}

In general icons in labels are now smaller than before (they were 16x16 pixels, which is preferable as that's typically the size they're designed for, meaning you get partial-pixel line widths etc):

before

after

    vertical-align: -0.125em;

This doesn't seem to actually do anything on my machine (Chromium). I don't think it should either, the inline-icons are in a .button, which is a flex box.

The PR does improve the alignment of the "stats" icons though, it just seems to have a bit of fallout elsewhere.