diff --git a/services/web/frontend/js/features/settings/components/emails/email.tsx b/services/web/frontend/js/features/settings/components/emails/email.tsx
index a8d1761a8a..a8e85c464d 100644
--- a/services/web/frontend/js/features/settings/components/emails/email.tsx
+++ b/services/web/frontend/js/features/settings/components/emails/email.tsx
@@ -14,14 +14,16 @@ function Email({ userEmailData }: EmailProps) {
userEmailData.affiliation?.institution || null
)
+ const isPrimary = userEmailData.default
+ const isProfessional =
+ userEmailData.confirmedAt &&
+ userEmailData.affiliation?.institution.confirmed &&
+ userEmailData.affiliation.licence !== 'free'
+ const hasBadges = isPrimary || isProfessional
+
return (
<>
{userEmailData.email}
- {userEmailData.default ? (
-
- Primary
-
- ) : null}
{!userEmailData.confirmedAt && (
@@ -34,13 +36,18 @@ function Email({ userEmailData }: EmailProps) {
)}
)}
- {userEmailData.confirmedAt &&
- userEmailData.affiliation?.institution.confirmed &&
- userEmailData.affiliation.licence !== 'free' && (
-
+ {hasBadges && (
+
+ {isPrimary && (
+ <>
+ Primary{' '}
+ >
+ )}
+ {isProfessional && (
{t('professional')}
-
- )}
+ )}
+
+ )}
>
)
}
diff --git a/services/web/frontend/stylesheets/app/account-settings.less b/services/web/frontend/stylesheets/app/account-settings.less
index 3b392d4a07..c824cc23f6 100644
--- a/services/web/frontend/stylesheets/app/account-settings.less
+++ b/services/web/frontend/stylesheets/app/account-settings.less
@@ -25,6 +25,7 @@
}
.affiliations-table-cell {
padding: 0.5rem;
+ overflow-wrap: break-word;
}
.affiliations-table-row--highlighted {
background-color: tint(@content-alt-bg-color, 6%);