Hovercard: hide on click ref

app/soapbox/components/__tests__/__snapshots__/display_name-test.js.snap

@@ -6,6 +6,7 @@ exports[`<DisplayName /> renders display name + account name 1`] = `
 >
   <span
     className="hover-ref-wrapper"
+    onClick={[Function]}
     onMouseEnter={[Function]}
     onMouseLeave={[Function]}
   >

app/soapbox/components/hover_ref_wrapper.js

@@ -26,6 +26,13 @@ const handleMouseLeave = (dispatch) => {
   };
 };
 
+const handleClick = (dispatch) => {
+  return e => {
+    showProfileHoverCard.cancel();
+    dispatch(closeProfileHoverCard(true));
+  };
+};
+
 export const HoverRefWrapper = ({ accountId, children, inline }) => {
   const dispatch = useDispatch();
   const ref = useRef();
@@ -37,6 +44,7 @@ export const HoverRefWrapper = ({ accountId, children, inline }) => {
       className='hover-ref-wrapper'
       onMouseEnter={handleMouseEnter(dispatch, ref, accountId)}
       onMouseLeave={handleMouseLeave(dispatch)}
+      onClick={handleClick(dispatch)}
     >
       {children}
     </Elem>

app/styles/components/profile_hover_card.scss

@@ -106,15 +106,8 @@
   }
 }
 
-.detailed-status {
-  .profile-hover-card {
-    top: 0;
-    left: 0;
-  }
-}
-
 /* Hide the popper when the reference is hidden */
-#popper[data-popper-reference-hidden] {
+.profile-hover-card[data-popper-reference-hidden] {
   visibility: hidden;
   pointer-events: none;
 }