From 4433db346ba00f56ae70c93807dfa130d7f5a38f Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Fri, 7 Feb 2020 17:42:53 +0000
Subject: [PATCH] Center pill content using more flexbox

Turns each pill item (already full height) into a
flex container with its content as a column. Uses
this to align the content (the pill label) to the
middle of the column.
---
 app/assets/stylesheets/components/pill.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/components/pill.scss b/app/assets/stylesheets/components/pill.scss
index 12c504fcc..d8dab6cdf 100644
--- a/app/assets/stylesheets/components/pill.scss
+++ b/app/assets/stylesheets/components/pill.scss
@@ -25,7 +25,9 @@
 
   a,
   &-selected-item {
-    display: block;
+    display: flex; // float causes display: block in browsers without flexbox
+    flex-direction: column;
+    justify-content: center;
     float: left;
     box-sizing: border-box;
     width: 100%;