From a7463dd3fc630110ed8f5d089a40d210f1781a86 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 2 Aug 2020 18:53:47 -0500
Subject: [PATCH] HoverCard: Add floating NavLinks for clickthrough

---
 app/soapbox/components/status.js                      |  1 +
 .../features/status/components/detailed_status.js     |  4 +++-
 app/styles/basics.scss                                | 11 +++++++++++
 app/styles/components/display-name.scss               |  1 +
 app/styles/components/profile_hover_card.scss         |  2 +-
 5 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/components/status.js b/app/soapbox/components/status.js
index 1ad324f47..641aafd02 100644
--- a/app/soapbox/components/status.js
+++ b/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} />
diff --git a/app/soapbox/features/status/components/detailed_status.js b/app/soapbox/features/status/components/detailed_status.js
index 79ad209ce..3ea96d0d7 100644
--- a/app/soapbox/features/status/components/detailed_status.js
+++ b/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>
diff --git a/app/styles/basics.scss b/app/styles/basics.scss
index 2dafa35a3..53119ffc4 100644
--- a/app/styles/basics.scss
+++ b/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;
+}
diff --git a/app/styles/components/display-name.scss b/app/styles/components/display-name.scss
index 2282c6d48..0dd3e1e65 100644
--- a/app/styles/components/display-name.scss
+++ b/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 {
diff --git a/app/styles/components/profile_hover_card.scss b/app/styles/components/profile_hover_card.scss
index 985b89ce1..eeae9d7c5 100644
--- a/app/styles/components/profile_hover_card.scss
+++ b/app/styles/components/profile_hover_card.scss
@@ -72,7 +72,7 @@
 
 .detailed-status {
   .profile-hover-card {
-    top: -20px;
+    top: 0;
     left: 80px;
   }
 }