diff --git a/app/soapbox/features/account/components/header.js b/app/soapbox/features/account/components/header.js
index 7c1e26954..ba8828809 100644
--- a/app/soapbox/features/account/components/header.js
+++ b/app/soapbox/features/account/components/header.js
@@ -397,7 +397,6 @@ class Header extends ImmutablePureComponent {
const avatarSize = isSmallScreen ? 90 : 200;
const deactivated = !account.getIn(['pleroma', 'is_active'], true);
- const lockedIcon = account.get('locked') ? () : '';
const displayNameHtml = deactivated ? { __html: intl.formatMessage(messages.deactivated) } : { __html: account.get('display_name_html') };
const verified = account.getIn(['pleroma', 'tags'], ImmutableList()).includes('verified');
@@ -430,7 +429,12 @@ class Header extends ImmutablePureComponent {
{verified && }
{account.get('bot') && }
- { @{getAcct(account, displayFqn)} {lockedIcon} }
+
+ @{getAcct(account, displayFqn)}
+ {account.get('locked') && (
+
+ )}
+
diff --git a/app/styles/components/account-header.scss b/app/styles/components/account-header.scss
index db6efa887..731f0c19b 100644
--- a/app/styles/components/account-header.scss
+++ b/app/styles/components/account-header.scss
@@ -143,7 +143,7 @@
&.is-locked {
.account__header__avatar {
- top: -130px;
+ top: -20px;
opacity: 0;
animation: 0.3s fadeOut;
animation-fill-mode: forwards;
@@ -221,7 +221,7 @@
width: 265px;
height: 74px;
position: absolute;
- top: 220px;
+ top: 100px;
opacity: 0;
animation: 0.3s fadeOut;
animation-fill-mode: forwards;
@@ -247,9 +247,9 @@
}
small {
- display: block;
+ display: flex;
font-size: 14px;
- line-height: 1.5;
+ color: var(--primary-text-color--faint);
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;