User badges tweaks for mobile view and relocate the hivebuzz level badge

src/app/components/cards/UserProfileHeader.jsx

@@ -116,6 +116,23 @@ class UserProfileHeader extends React.Component {
                     <h1>
                         <div className="UserProfile__Userpic">
                             <Userpic account={accountname} hideIfDefault />
+                        </div>
+                        {name || accountname}{' '}
+                        <Tooltip
+                            t={tt(
+                                'user_profile.this_is_users_reputations_score_it_is_based_on_history_of_votes',
+                                { name: accountname }
+                            )}
+                        >
+                            <span className="UserProfile__rep">
+                                ({Math.floor(profile.get('reputation'))})
+                            </span>
+                        </Tooltip>
+                        <Tooltip
+                            t={tt('user_profile.hivebuzz_level_badge', {
+                                name: accountname,
+                            })}
+                        >
                             <a
                                 href={`http://hivebuzz.me/@${accountname}`}
                                 target="_blank"
@@ -129,17 +146,6 @@ class UserProfileHeader extends React.Component {
                                     className="UserProfile__badge_image_hivebuzzlevel"
                                 />
                             </a>
-                        </div>
-                        {name || accountname}{' '}
-                        <Tooltip
-                            t={tt(
-                                'user_profile.this_is_users_reputations_score_it_is_based_on_history_of_votes',
-                                { name: accountname }
-                            )}
-                        >
-                            <span className="UserProfile__rep">
-                                ({Math.floor(profile.get('reputation'))})
-                            </span>
                         </Tooltip>
                         {blacklists}
                         {AffiliationMap[accountname] ? (
@@ -251,8 +257,8 @@ class UserProfileHeader extends React.Component {
                             <TimeAgoWrapper date={profile.get('active')} />
                         </p>
                         {(hivebuzzBadges.size > 0 || peakdBadges.size > 0) && (
-                            <div className="row">
-                                <div className="UserProfile__badges column">
+                            <div className="UserProfile__badges row">
+                                <div className="UserProfile__badges_tabs_container">
                                     <Tabs>
                                         <TabList>
                                             {badgesTypes.badges.length > 0 && (

src/app/components/pages/UserProfile.scss

@@ -56,7 +56,10 @@
           }
           z-index: 2;
           font-weight: bold;
-        }
+      }
+      @media screen and (max-width: 39.9375em) {
+          font-size: 0.85rem;
+      }
   }
 
   div.UserProfile__top-menu {
@@ -70,6 +73,11 @@
       .Icon > svg, .Icon span.icon {
           vertical-align: middle!important;
       }
+
+      .columns.small-9 {
+          flex: 1 1 0px;
+          max-width: 100%;
+      }
   }
 }
 
@@ -224,28 +232,34 @@
 }
 
 .UserProfile__badge_image_hivebuzzlevel {
-    position: absolute;
-    width: 20px;
-    height: 20px;
+    width: 25px;
+    height: 25px;
     top: 30px;
     left: 30px;
     transition: width 0.25s, height 0.25s, top 0.25s, left 0.25s;
+    margin-left: 7px;
 
     &:hover {
-        width: 30px;
-        height: 30px;
+        width: 40px;
+        height: 40px;
         top: 26px;
         left: 26px;
     }
 }
 
 .UserProfile__badges {
-    background-color: rgba(0, 0, 0, 0.7);
-    border-radius: 4px;
-    padding: 5px;
-    margin-left: 50px;
-    margin-right: 50px;
-    margin-bottom: 10px;
+    .UserProfile__badges_tabs_container {
+        background-color: rgba(0, 0, 0, 0.7);
+        border-radius: 4px;
+        padding: 5px;
+        margin-left: auto;
+        margin-right: auto;
+        margin-bottom: 10px;
+    }
+
+    @media screen and (max-width: 39.9375em) {
+        margin: 0;
+    }
 
     a {
         display: inline-block;

src/app/locales/en.json

@@ -460,7 +460,9 @@
             "other": "%(count)s posts"
         },
         "hide_reblogs": "Hide Reblogs",
-        "show_all": "Show All"
+        "show_all": "Show All",
+        "hivebuzz_level_badge":
+            "This is %(name)s's level badged earned from Hivebuzz programs"
     },
     "post_jsx": {
         "now_showing_comments_with_low_ratings":