From dfc33805cb0be00db61568f6e8c1865c9952260e Mon Sep 17 00:00:00 2001
From: Eric Mc Sween <eric.mcsween@overleaf.com>
Date: Wed, 15 Jun 2022 08:46:52 -0400
Subject: [PATCH] Merge pull request #8383 from
 overleaf/ms-em-settings-page-emails

Move "Primary" badge under the email address in settings

GitOrigin-RevId: ecb11047d9db6feb3bc0128f4a1d490836be7ab5
---
 .../settings/components/emails/email.tsx      | 29 ++++++++++++-------
 .../stylesheets/app/account-settings.less     |  1 +
 2 files changed, 19 insertions(+), 11 deletions(-)

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 ? (
-        <span className="small ms-1">
-          <span className="label label-info">Primary</span>
-        </span>
-      ) : null}
       {!userEmailData.confirmedAt && (
         <div className="small">
           <strong>
@@ -34,13 +36,18 @@ function Email({ userEmailData }: EmailProps) {
           )}
         </div>
       )}
-      {userEmailData.confirmedAt &&
-        userEmailData.affiliation?.institution.confirmed &&
-        userEmailData.affiliation.licence !== 'free' && (
-          <div className="small">
+      {hasBadges && (
+        <div className="small">
+          {isPrimary && (
+            <>
+              <span className="label label-info">Primary</span>{' '}
+            </>
+          )}
+          {isProfessional && (
             <span className="label label-primary">{t('professional')}</span>
-          </div>
-        )}
+          )}
+        </div>
+      )}
     </>
   )
 }
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%);