HoverCard: Do the JS way on DetailedStatus too

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() {

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() {

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;
   }
 }