From 1266585aef9f0299304bb46a75a8ca57cb0a8eed Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 2 Aug 2020 19:50:17 -0500
Subject: [PATCH] HoverCard: Reposition "Follow you!" component

---
 .../profile_hover_card_container.js                  | 10 +++++-----
 app/styles/components/profile_hover_card.scss        | 12 +++++++++---
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/app/soapbox/features/profile_hover_card/profile_hover_card_container.js b/app/soapbox/features/profile_hover_card/profile_hover_card_container.js
index a7a33d17e..e7e5c4f8c 100644
--- a/app/soapbox/features/profile_hover_card/profile_hover_card_container.js
+++ b/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>
diff --git a/app/styles/components/profile_hover_card.scss b/app/styles/components/profile_hover_card.scss
index eeae9d7c5..ebd924fa6 100644
--- a/app/styles/components/profile_hover_card.scss
+++ b/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;