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 (
+ { followed_by ?
+
+
+
+ : '' }
{isAdmin(account) && }
{isModerator(account) && }
{account.getIn(['patron', 'is_patron']) && }
- { followed_by ?
-
-
-
- : '' }
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;