Merge pull request #8383 from overleaf/ms-em-settings-page-emails

Move "Primary" badge under the email address in settings

GitOrigin-RevId: ecb11047d9db6feb3bc0128f4a1d490836be7ab5

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>
+      )}
     </>
   )
 }

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%);