Fixing bug with crash on remote profile

Displaying a remote profile would cause the app to crash due to unmerged
changes related to reverting in-app redirects back to normal, external
URL permalinks:

https://github.com/hometown-fork/hometown/pull/1249

app/javascript/mastodon/features/account/components/header.jsx

@@ -14,6 +14,7 @@ import LockIcon from '@/material-icons/400-24px/lock.svg?react';
 import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
 import NotificationsIcon from '@/material-icons/400-24px/notifications.svg?react';
 import NotificationsActiveIcon from '@/material-icons/400-24px/notifications_active-fill.svg?react';
+import OpenInNewIcon from '@/material-icons/400-24px/open_in_new.svg?react';
 import ShareIcon from '@/material-icons/400-24px/share.svg?react';
 import { Avatar } from 'mastodon/components/avatar';
 import { Badge, AutomatedBadge, GroupBadge } from 'mastodon/components/badge';
@@ -437,7 +438,9 @@ class Header extends ImmutablePureComponent {
 
           <div className='account__header__tabs__name'>
             <h1>
-              <a href={account.get('url')} target='_blank' rel='noopener noreferrer'><span dangerouslySetInnerHTML={displayNameHtml} /></a>{isRemote ? <span> <IconButton icon='external-link' size={14} onClick={this.handleDisplayNameClick} /></span> : null}
+              <div>
+                <a href={account.get('url')} target='_blank' rel='noopener noreferrer'><span dangerouslySetInnerHTML={displayNameHtml} /></a>{isRemote ? <span> <IconButton className="account-header__open-in-new__icon" icon='open_in_new' iconComponent={OpenInNewIcon} onClick={this.handleDisplayNameClick} /></span> : null}
+              </div>
               <small>
                 <span>@{username}<span className='invisible'>@{domain}</span></span>
                 <DomainPill username={username} domain={domain} isSelf={me === account.get('id')} />

app/javascript/mastodon/features/directory/components/account_card.tsx

@@ -4,17 +4,18 @@ import { useCallback } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import classNames from 'classnames';
-import { Permalink } from 'mastodon/components/permalink';
 
 import {
   followAccount,
   unblockAccount,
   unmuteAccount,
 } from 'mastodon/actions/accounts';
+
 import { openModal } from 'mastodon/actions/modal';
 import { Avatar } from 'mastodon/components/avatar';
 import { Button } from 'mastodon/components/button';
 import { DisplayName } from 'mastodon/components/display_name';
+import { Permalink } from 'mastodon/components/permalink';
 import { ShortNumber } from 'mastodon/components/short_number';
 import { autoPlayGif, me } from 'mastodon/initial_state';
 import type { Account } from 'mastodon/models/account';

app/javascript/styles/hometown.scss

@@ -5,6 +5,21 @@
   color: inherit;
 }
 
+.account__header {
+  h1 {
+    div {
+      display: flex;
+
+      a, span {
+        display: inline-flex;
+      }
+    }
+  }
+  .account-header__open-in-new__icon > svg {
+    height: 20px;
+  }
+}
+
 // app/javascript/mastodon/features/ui/components/navigation_panel.jsx
 // We hide the logo from the sidebar. It's kept in the JSX, to keep the modifications of the React
 // codebase as small as possible.