HoverCard: Add floating NavLinks for clickthrough

app/soapbox/components/status.js

@@ -463,6 +463,7 @@ class Status extends ImmutablePureComponent {
               <div className='status__profile' onMouseEnter={this.handleProfileHover} onMouseLeave={this.handleProfileLeave}>
                 <NavLink to={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])} className='status__display-name'>
                   <div className='status__avatar'>
+                    <NavLink to={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])} className='floating-link' />
                     {statusAvatar}
                   </div>
                   <DisplayName account={status.get('account')} others={otherAccounts} />

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

@@ -173,7 +173,9 @@ export default class DetailedStatus extends ImmutablePureComponent {
           <div className='detailed-status__profile' onMouseEnter={this.handleProfileHover} onMouseLeave={this.handleProfileLeave}>
             <NavLink to={`/@${status.getIn(['account', 'acct'])}`} className='detailed-status__display-name'>
               <div className='detailed-status__display-avatar'><Avatar account={status.get('account')} size={48} /></div>
-              <DisplayName account={status.get('account')} />
+              <DisplayName account={status.get('account')}>
+                <NavLink to={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])} className='floating-link' />
+              </DisplayName>
             </NavLink>
             <ProfileHoverCardContainer accountId={status.getIn(['account', 'id'])} visible={!isMobile(window.innerWidth) && profileCardVisible} />
           </div>

app/styles/basics.scss

@@ -218,3 +218,14 @@ noscript {
     }
   }
 }
+
+.floating-link {
+  width: 100%;
+  height: 100%;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  z-index: 9999;
+}

app/styles/components/display-name.scss

@@ -41,6 +41,7 @@ a.account__display-name {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  position: relative;
 }
 
 .display-name__html {

app/styles/components/profile_hover_card.scss

@@ -72,7 +72,7 @@
 
 .detailed-status {
   .profile-hover-card {
-    top: -20px;
+    top: 0;
     left: 80px;
   }
 }