Improving usercard badge alignment

Improving usercard badge alignment
diff --git a/app/assets/stylesheets/common/base/user-badges.scss b/app/assets/stylesheets/common/base/user-badges.scss
index 332189a..db433ab 100644
--- a/app/assets/stylesheets/common/base/user-badges.scss
+++ b/app/assets/stylesheets/common/base/user-badges.scss
@@ -4,14 +4,12 @@
   color: $primary;
   border: 1px solid $primary-low;
   line-height: $line-height-large;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   background-color: $secondary;
   margin: 0 0 3px;
-
-  .fa {
-    padding-right: 3px;
-    font-size: 1.4em;
-    vertical-align: bottom;
+  .d-icon {
+    margin-right: 0.25em;
   }
 
   img {
diff --git a/app/assets/stylesheets/desktop/user-card.scss b/app/assets/stylesheets/desktop/user-card.scss
index 54893e0..f94ae71 100644
--- a/app/assets/stylesheets/desktop/user-card.scss
+++ b/app/assets/stylesheets/desktop/user-card.scss
@@ -279,12 +279,14 @@ $user_card_background: $secondary;
   }
 
   .badge-section {
-    float: left;
+    display: flex;
+    align-items: flex-start;
     width: 500px;
     padding-bottom: 10px;
     margin-top: 5px;
 
     .user-badge {
+      margin-right: 0.5em;
       background: $primary-very-low;
       border: 1px solid $primary-low;
       color: $user_card_primary;

GitHub
sha: 6213e020

2 Likes

This commit has been mentioned on Discourse Meta. There might be relevant details there: