From 5e11bc79ffdfc892f05110daed344bfd0ee259f5 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Fri, 2 Mar 2018 14:43:54 -0500
Subject: [PATCH] Fixing some regressions for profile badges

---
 app/assets/stylesheets/common/base/user-badges.scss    | 10 ++++++++++
 app/assets/stylesheets/common/base/user.scss           |  5 +++++
 .../stylesheets/desktop/components/user-info.scss      |  2 +-
 app/assets/stylesheets/desktop/user.scss               |  5 +++++
 4 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/common/base/user-badges.scss b/app/assets/stylesheets/common/base/user-badges.scss
index b88448320dc..d38849429da 100644
--- a/app/assets/stylesheets/common/base/user-badges.scss
+++ b/app/assets/stylesheets/common/base/user-badges.scss
@@ -285,6 +285,13 @@
     display: flex;
     align-items: center;
     width: 100%;
+    @media screen and (max-width: 500px) {
+      flex-wrap: wrap;
+    }
+    div:not(.grant-info-item) {
+      display: flex;
+    }
+
     &.hidden {
       display: none;
     }
@@ -292,6 +299,9 @@
   .grant-info-item {
     margin-bottom: 1em;
     color: dark-light-choose($primary-medium, $secondary-medium);
+    &:first-of-type {
+      margin-right: 10px;
+    }
   }
 
   .badge-title .form-horizontal .controls {
diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss
index 4fedecbc544..98608496a0a 100644
--- a/app/assets/stylesheets/common/base/user.scss
+++ b/app/assets/stylesheets/common/base/user.scss
@@ -384,11 +384,16 @@
 .top-section,
 .top-sub-section {
   margin-bottom: 20px;
+  &.badges-section {
+    display: flex;
+    flex-wrap: wrap;
+  }
 }
 
 .stats-title {
   text-transform: uppercase;
   margin-bottom: 10px;
+  width: 100%;
 }
 
 .stats-section {
diff --git a/app/assets/stylesheets/desktop/components/user-info.scss b/app/assets/stylesheets/desktop/components/user-info.scss
index 512e44e94be..ba13a6e182e 100644
--- a/app/assets/stylesheets/desktop/components/user-info.scss
+++ b/app/assets/stylesheets/desktop/components/user-info.scss
@@ -1,7 +1,7 @@
 .user-info {
   &.medium {
     flex: 0 0 32%;
-    margin-right: 2%;
+    margin: 0 2% 4vh 0;
     display: flex;
     &:nth-of-type(3n) {
       margin-right: 0;
diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss
index d393e58994f..38c4c87b9ad 100644
--- a/app/assets/stylesheets/desktop/user.scss
+++ b/app/assets/stylesheets/desktop/user.scss
@@ -75,6 +75,11 @@
   margin-bottom: 10px;
   box-sizing: border-box;
 
+  &.user-badges-list {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
   .btn.right {
     float: right
   }