HoverCard: Fix JS console errors

app/soapbox/components/status.js

@@ -461,11 +461,11 @@ class Status extends ImmutablePureComponent {
               </NavLink>
 
               <div className='status__profile' onMouseEnter={this.handleProfileHover} onMouseLeave={this.handleProfileLeave}>
+                <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'>
-                  <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} />
                 </NavLink>
                 <ProfileHoverCardContainer accountId={status.getIn(['account', 'id'])} visible={!isMobile(window.innerWidth) && profileCardVisible} />

app/soapbox/features/profile_hover_card/profile_hover_card_container.js

@@ -41,9 +41,9 @@ class ProfileHoverCardContainer extends ImmutablePureComponent {
   getBadges = () => {
     const { account } = this.props;
     let badges = [];
-    if (isAdmin(account)) badges.push(<Badge slug='admin' title='Admin' />);
-    if (isModerator(account)) badges.push(<Badge slug='moderator' title='Moderator' />);
-    if (account.getIn(['patron', 'is_patron'])) badges.push(<Badge slug='patron' title='Patron' />);
+    if (isAdmin(account)) badges.push(<Badge key='admin' slug='admin' title='Admin' />);
+    if (isModerator(account)) badges.push(<Badge key='moderator' slug='moderator' title='Moderator' />);
+    if (account.getIn(['patron', 'is_patron'])) badges.push(<Badge key='patron' slug='patron' title='Patron' />);
     return badges;
   }
 

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

@@ -171,12 +171,16 @@ export default class DetailedStatus extends ImmutablePureComponent {
       <div style={outerStyle}>
         <div ref={this.setRef} className={classNames('detailed-status', { compact })}>
           <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>
+            <div className='detailed-status__display-name'>
+              <NavLink to={`/@${status.getIn(['account', 'acct'])}`}>
+                <div className='detailed-status__display-avatar'>
+                  <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>
-            </NavLink>
+            </div>
             <ProfileHoverCardContainer accountId={status.getIn(['account', 'id'])} visible={!isMobile(window.innerWidth) && profileCardVisible} />
           </div>