Hovercard: mouseout clears the card

app/soapbox/actions/profile_hover_card.js

@@ -1,4 +1,5 @@
 export const PROFILE_HOVER_CARD_OPEN = 'PROFILE_HOVER_CARD_OPEN';
+export const PROFILE_HOVER_CARD_CLEAR = 'PROFILE_HOVER_CARD_CLEAR';
 
 export function openProfileHoverCard(ref, accountId) {
   return {
@@ -7,3 +8,9 @@ export function openProfileHoverCard(ref, accountId) {
     accountId,
   };
 }
+
+export function clearProfileHoverCard() {
+  return {
+    type: PROFILE_HOVER_CARD_CLEAR,
+  };
+}

app/soapbox/components/status.js

@@ -81,7 +81,7 @@ class Status extends ImmutablePureComponent {
     onEmbed: PropTypes.func,
     onHeightChange: PropTypes.func,
     onToggleHidden: PropTypes.func,
-    onShowProfileCard: PropTypes.func,
+    onShowHoverProfileCard: PropTypes.func,
     muted: PropTypes.bool,
     hidden: PropTypes.bool,
     unread: PropTypes.bool,
@@ -256,17 +256,18 @@ class Status extends ImmutablePureComponent {
     this.handleToggleMediaVisibility();
   }
 
-  showProfileCard = debounce(() => {
-    const { onShowProfileCard, status } = this.props;
-    onShowProfileCard(this.profileNode, status.getIn(['account', 'id']));
+  showProfileHoverCard = debounce(() => {
+    const { onShowProfileHoverCard, status } = this.props;
+    onShowProfileHoverCard(this.profileNode, status.getIn(['account', 'id']));
   }, 1200);
 
   handleProfileHover = e => {
-    if (!isMobile(window.innerWidth)) this.showProfileCard();
+    if (!isMobile(window.innerWidth)) this.showProfileHoverCard();
   }
 
   handleProfileLeave = e => {
-    this.showProfileCard.cancel();
+    this.showProfileHoverCard.cancel();
+    this.props.onClearProfileHoverCard();
     this.setState({ profileCardVisible: false });
   }
 

app/soapbox/containers/status_container.js

@@ -35,7 +35,10 @@ import {
   groupRemoveStatus,
 } from '../actions/groups';
 import { getSettings } from '../actions/settings';
-import { openProfileHoverCard } from 'soapbox/actions/profile_hover_card';
+import {
+  openProfileHoverCard,
+  clearProfileHoverCard,
+} from 'soapbox/actions/profile_hover_card';
 
 const messages = defineMessages({
   deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
@@ -207,10 +210,14 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
     dispatch(groupRemoveStatus(groupId, statusId));
   },
 
-  onShowProfileCard(ref, accountId) {
+  onShowProfileHoverCard(ref, accountId) {
     dispatch(openProfileHoverCard(ref, accountId));
   },
 
+  onClearProfileHoverCard() {
+    dispatch(clearProfileHoverCard());
+  },
+
 });
 
 export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(Status));

app/soapbox/features/status/components/detailed_status.js

@@ -86,16 +86,16 @@ 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(() => {
+  showProfileHoverCard = debounce(() => {
     this.setState({ profileCardVisible: true });
   }, 1200);
 
   handleProfileHover = e => {
-    if (!isMobile(window.innerWidth)) this.showProfileCard();
+    if (!isMobile(window.innerWidth)) this.showProfileHoverCard();
   }
 
   handleProfileLeave = e => {
-    this.showProfileCard.cancel();
+    this.showProfileHoverCard.cancel();
     this.setState({ profileCardVisible: false });
   }
 

app/soapbox/reducers/profile_hover_card.js

@@ -1,4 +1,7 @@
-import { PROFILE_HOVER_CARD_OPEN } from 'soapbox/actions/profile_hover_card';
+import {
+  PROFILE_HOVER_CARD_OPEN,
+  PROFILE_HOVER_CARD_CLEAR,
+} from 'soapbox/actions/profile_hover_card';
 import { Map as ImmutableMap } from 'immutable';
 
 const initialState = ImmutableMap();
@@ -10,6 +13,8 @@ export default function profileHoverCard(state = initialState, action) {
       ref: action.ref,
       accountId: action.accountId,
     });
+  case PROFILE_HOVER_CARD_CLEAR:
+    return ImmutableMap();
   default:
     return state;
   }

app/styles/components/profile_hover_card.scss

@@ -17,7 +17,6 @@
   z-index: 200;
   top: 0;
   left: 0;
-  padding: 20px;
   margin-bottom: 10px;
 
   &--visible {