diff --git a/app/javascript/flavours/glitch/features/account/components/header.js b/app/javascript/flavours/glitch/features/account/components/header.js
index 071d00bb4c..963ce7bf3f 100644
--- a/app/javascript/flavours/glitch/features/account/components/header.js
+++ b/app/javascript/flavours/glitch/features/account/components/header.js
@@ -321,6 +321,11 @@ class Header extends ImmutablePureComponent {
badge = null;
}
+ let role = null;
+ if (account.getIn(['roles', 0])) {
+ role = (
{account.getIn(['roles', 0, 'name'])}
);
+ }
+
return (
{!(suspended || hidden || account.get('moved')) && account.getIn(['relationship', 'requested_by']) &&
}
@@ -337,6 +342,7 @@ class Header extends ImmutablePureComponent {
+ {role}
{!suspended && (
diff --git a/app/javascript/flavours/glitch/styles/accounts.scss b/app/javascript/flavours/glitch/styles/accounts.scss
index cdc506cf45..2158a691ff 100644
--- a/app/javascript/flavours/glitch/styles/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/accounts.scss
@@ -214,7 +214,7 @@
font-size: 12px;
line-height: 12px;
font-weight: 500;
- color: var(--user-role-accent, $ui-secondary-color);
+ color: $ui-secondary-color;
background-color: var(--user-role-background, rgba($ui-secondary-color, 0.1));
border: 1px solid var(--user-role-border, rgba($ui-secondary-color, 0.5));
diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss
index 5b3e1db1bc..c2a6593b1a 100644
--- a/app/javascript/flavours/glitch/styles/components/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/components/accounts.scss
@@ -533,14 +533,22 @@
&__tabs {
display: flex;
- align-items: flex-start;
+ align-items: flex-end;
justify-content: space-between;
padding: 7px 10px;
- margin-top: -55px;
- gap: 8px;
+ margin-top: -81px;
+ height: 130px;
overflow: hidden;
margin-left: -2px; // aligns the pfp with content below
+ .account-role {
+ margin: 0 2px;
+ padding: 4px 0;
+ box-sizing: border-box;
+ min-width: 90px;
+ text-align: center;
+ }
+
&__buttons {
display: flex;
align-items: center;