From eeaf9f0b8e69cc9ea07a0f0bda5c6b9a560633ae Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 3 Aug 2020 00:40:13 -0500
Subject: [PATCH] HoverCard: Do the JS way on DetailedStatus too

---
 app/soapbox/components/status.js                       |  2 +-
 .../features/status/components/detailed_status.js      | 10 ++++++++--
 app/styles/components/profile_hover_card.scss          |  6 +++---
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/app/soapbox/components/status.js b/app/soapbox/components/status.js
index 42f44d7cc..b7f21a2fd 100644
--- a/app/soapbox/components/status.js
+++ b/app/soapbox/components/status.js
@@ -263,7 +263,7 @@ class Status extends ImmutablePureComponent {
 
   handleProfileLeave = e => {
     this.showProfileCard.cancel();
-    if (!isMobile(window.innerWidth)) this.setState({ profileCardVisible: false });
+    this.setState({ profileCardVisible: false });
   }
 
   _properStatus() {
diff --git a/app/soapbox/features/status/components/detailed_status.js b/app/soapbox/features/status/components/detailed_status.js
index 3fb84f8c6..4da17ba99 100644
--- a/app/soapbox/features/status/components/detailed_status.js
+++ b/app/soapbox/features/status/components/detailed_status.js
@@ -18,6 +18,7 @@ import PollContainer from 'soapbox/containers/poll_container';
 import { StatusInteractionBar } from './status_interaction_bar';
 import ProfileHoverCardContainer from 'soapbox/features/profile_hover_card/profile_hover_card_container';
 import { isMobile } from 'soapbox/is_mobile';
+import { debounce } from 'lodash';
 
 export default class DetailedStatus extends ImmutablePureComponent {
 
@@ -84,12 +85,17 @@ export default class DetailedStatus extends ImmutablePureComponent {
     window.open(href, 'soapbox-intent', 'width=445,height=600,resizable=no,menubar=no,status=no,scrollbars=yes');
   }
 
+  showProfileCard = debounce(() => {
+    this.setState({ profileCardVisible: true });
+  }, 1200);
+
   handleProfileHover = e => {
-    if (!isMobile(window.innerWidth)) this.setState({ profileCardVisible: true });
+    if (!isMobile(window.innerWidth)) this.showProfileCard();
   }
 
   handleProfileLeave = e => {
-    if (!isMobile(window.innerWidth)) this.setState({ profileCardVisible: false });
+    this.showProfileCard.cancel();
+    this.setState({ profileCardVisible: false });
   }
 
   render() {
diff --git a/app/styles/components/profile_hover_card.scss b/app/styles/components/profile_hover_card.scss
index 5d7f7e8ff..3293eeb8f 100644
--- a/app/styles/components/profile_hover_card.scss
+++ b/app/styles/components/profile_hover_card.scss
@@ -16,7 +16,7 @@
   width: 320px;
   z-index: 998;
   left: -10px;
-  padding-top: 20px;
+  padding: 20px;
   margin-bottom: 10px;
 
   &--visible {
@@ -25,7 +25,7 @@
   }
 
   @media(min-width: 750px) {
-    left: -80px;
+    left: -100px;
   }
 
   .profile-hover-card__container {
@@ -114,7 +114,7 @@
 .detailed-status {
   .profile-hover-card {
     top: 0;
-    left: 80px;
+    left: 60px;
   }
 }