Hovercard: attach to each element for better positioning

app/soapbox/components/display_name.js

@@ -4,6 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import VerificationBadge from './verification_badge';
 import { acctFull } from '../utils/accounts';
 import { List as ImmutableList } from 'immutable';
+import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
 
 export default class DisplayName extends React.PureComponent {
 
@@ -42,7 +43,9 @@ export default class DisplayName extends React.PureComponent {
 
     return (
       <span className='display-name'>
-        {displayName}
+        <HoverRefWrapper accountId={account.get('id')} inline>
+          {displayName}
+        </HoverRefWrapper>
         {suffix}
         {children}
       </span>

app/soapbox/components/hover_ref_wrapper.js

@@ -26,25 +26,31 @@ const handleMouseLeave = (dispatch) => {
   };
 };
 
-export const HoverRefWrapper = ({ accountId, children }) => {
+export const HoverRefWrapper = ({ accountId, children, inline }) => {
   const dispatch = useDispatch();
   const ref = useRef();
+  const Elem = inline ? 'span' : 'div';
 
   return (
-    <div
+    <Elem
       ref={ref}
       className='hover-ref-wrapper'
       onMouseEnter={handleMouseEnter(dispatch, ref, accountId)}
       onMouseLeave={handleMouseLeave(dispatch)}
     >
       {children}
-    </div>
+    </Elem>
   );
 };
 
 HoverRefWrapper.propTypes = {
   accountId: PropTypes.string,
   children: PropTypes.node,
+  inline: PropTypes.bool,
+};
+
+HoverRefWrapper.defaultProps = {
+  inline: false,
 };
 
 export default HoverRefWrapper;

app/soapbox/components/profile_hover_card.js

@@ -52,14 +52,7 @@ export const ProfileHoverCard = ({ visible }) => {
     if (accountId) dispatch(fetchRelationships([accountId]));
   }, [dispatch, accountId]);
 
-  const { styles, attributes } = usePopper(targetRef, popperElement, {
-    modifiers: [{
-      name: 'offset',
-      options: {
-        offset: [-100, 0],
-      },
-    }],
-  });
+  const { styles, attributes } = usePopper(targetRef, popperElement);
 
   if (!account) return null;
   const accountBio = { __html: account.get('note_emojified') };

app/soapbox/components/status.js

@@ -462,17 +462,18 @@ class Status extends ImmutablePureComponent {
                   <img src={favicon} alt='' title={domain} />
                 </div>}
 
-              <HoverRefWrapper accountId={status.getIn(['account', 'id'])}>
-                <div className='status__profile'>
-                  <div className='status__avatar'>
-                    <NavLink to={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])} className='floating-link' />
-                    {statusAvatar}
-                  </div>
-                  <NavLink to={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])} className='status__display-name'>
-                    <DisplayName account={status.get('account')} others={otherAccounts} />
-                  </NavLink>
+              <div className='status__profile'>
+                <div className='status__avatar'>
+                  <HoverRefWrapper accountId={status.getIn(['account', 'id'])}>
+                    <NavLink to={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])}>
+                      {statusAvatar}
+                    </NavLink>
+                  </HoverRefWrapper>
                 </div>
-              </HoverRefWrapper>
+                <NavLink to={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])} className='status__display-name'>
+                  <DisplayName account={status.get('account')} others={otherAccounts} />
+                </NavLink>
+              </div>
             </div>
 
             {!group && status.get('group') && (

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

@@ -164,20 +164,22 @@ export default class DetailedStatus extends ImmutablePureComponent {
     return (
       <div style={outerStyle}>
         <div ref={this.setRef} className={classNames('detailed-status', { compact })}>
-          <HoverRefWrapper accountId={status.getIn(['account', 'id'])}>
-            <div className='detailed-status__profile'>
-              <div className='detailed-status__display-name'>
-                <NavLink to={`/@${status.getIn(['account', 'acct'])}`}>
-                  <div className='detailed-status__display-avatar'>
+          <div className='detailed-status__profile'>
+            <div className='detailed-status__display-name'>
+              <NavLink to={`/@${status.getIn(['account', 'acct'])}`}>
+                <div className='detailed-status__display-avatar'>
+                  <HoverRefWrapper accountId={status.getIn(['account', 'id'])}>
                     <Avatar account={status.get('account')} size={48} />
-                  </div>
-                </NavLink>
-                <DisplayName account={status.get('account')}>
-                  <NavLink to={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])} className='floating-link' />
-                </DisplayName>
-              </div>
+                  </HoverRefWrapper>
+                </div>
+              </NavLink>
+              <DisplayName account={status.get('account')}>
+                <HoverRefWrapper accountId={status.getIn(['account', 'id'])}>
+                  <NavLink to={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])} />
+                </HoverRefWrapper>
+              </DisplayName>
             </div>
-          </HoverRefWrapper>
+          </div>
 
           {status.get('group') && (
             <div className='status__meta'>

app/styles/components/profile_hover_card.scss

@@ -113,18 +113,6 @@
   }
 }
 
-/* Prevent floating avatars from intercepting with current card */
-.status,
-.detailed-status {
-  .floating-link {
-    display: none;
-  }
-
-  &:hover .floating-link {
-    display: block;
-  }
-}
-
 /* Hide the popper when the reference is hidden */
 #popper[data-popper-reference-hidden] {
   visibility: hidden;