HoverCard: Reposition "Follow you!" component

app/soapbox/features/profile_hover_card/profile_hover_card_container.js

@@ -47,17 +47,17 @@ class ProfileHoverCardContainer extends ImmutablePureComponent {
     return (
       <div className={classNames('profile-hover-card', { 'profile-hover-card--visible': visible })}>
         <div className='profile-hover-card__container'>
+          { followed_by ?
+            <span className='relationship-tag'>
+              <FormattedMessage id='account.follows_you' defaultMessage='Follows you' />
+            </span>
+            : '' }
           <div className='profile-hover-card__action-button'><ActionButton account={account} /></div>
           <UserPanel className='profile-hover-card__user' accountId={accountId} />
           <div className='profile-hover-card__badges'>
             {isAdmin(account) && <Badge slug='admin' title='Admin' />}
             {isModerator(account) && <Badge slug='moderator' title='Moderator' />}
             {account.getIn(['patron', 'is_patron']) && <Badge slug='patron' title='Patron' />}
-            { followed_by ?
-              <span className='relationship-tag'>
-                <FormattedMessage id='account.follows_you' defaultMessage='Follows you' />
-              </span>
-              : '' }
           </div>
           <div className='profile-hover-card__bio' dangerouslySetInnerHTML={accountBio} />
         </div>

app/styles/components/profile_hover_card.scss

@@ -18,13 +18,13 @@
   z-index: 998;
   left: -10px;
   padding-top: 20px;
+  margin-bottom: 10px;
 
   &--visible {
     opacity: 1;
     pointer-events: all;
   }
 
-
   @media(min-width: 750px) {
     left: -80px;
   }
@@ -51,12 +51,18 @@
     }
   }
 
+  .relationship-tag {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    z-index: 1;
+  }
+
   .profile-hover-card__badges {
     margin: 0 20px 20px;
     display: flex;
 
-    .badge,
-    .relationship-tag {
+    .badge {
       padding: 2px 4px;
       margin-right: 5px;
       border-radius: 3px;