--- a/browser/components/preferences/in-content-new/sync.js
+++ b/browser/components/preferences/in-content-new/sync.js
@@ -101,17 +101,17 @@ var gSyncPane = {
     let username = Services.prefs.getCharPref("services.sync.username", "");
     if (!username) {
       this.page = FXA_PAGE_LOGGED_OUT;
       return;
     }
 
     // Use cached values while we wait for the up-to-date values
     let cachedComputerName = Services.prefs.getCharPref("services.sync.client.name", "");
-    document.getElementById("fxaEmailAddress1").textContent = username;
+    document.querySelector(".fxaEmailAddress").value = username;
     this._populateComputerName(cachedComputerName);
     this.page = FXA_PAGE_LOGGED_IN;
   },
 
   _init() {
     let topics = ["weave:service:login:error",
                   "weave:service:login:finish",
                   "weave:service:start-over:finish",
@@ -250,18 +250,17 @@ var gSyncPane = {
   },
 
   updateWeavePrefs() {
     let service = Components.classes["@mozilla.org/weave/service;1"]
                   .getService(Components.interfaces.nsISupports)
                   .wrappedJSObject;
 
     let displayNameLabel = document.getElementById("fxaDisplayName");
-    let fxaEmailAddress1Label = document.getElementById("fxaEmailAddress1");
-    fxaEmailAddress1Label.hidden = false;
+    let fxaEmailAddressLabels = document.querySelectorAll(".fxaEmailAddress");
     displayNameLabel.hidden = true;
 
     // determine the fxa status...
     this._showLoadPage(service);
 
     fxAccounts.getSignedInUser().then(data => {
       if (!data) {
         this.page = FXA_PAGE_LOGGED_OUT;
@@ -286,19 +285,19 @@ var gSyncPane = {
         fxaLoginStatus.selectedIndex = FXA_LOGIN_FAILED;
         syncReady = false;
       // Else we must be golden (or in an error state we expect to magically
       // resolve itself)
       } else {
         fxaLoginStatus.selectedIndex = FXA_LOGIN_VERIFIED;
         syncReady = true;
       }
-      fxaEmailAddress1Label.textContent = data.email;
-      document.getElementById("fxaEmailAddress2").textContent = data.email;
-      document.getElementById("fxaEmailAddress3").textContent = data.email;
+      fxaEmailAddressLabels.forEach((label) => {
+        label.value = data.email;
+      });
       this._populateComputerName(Weave.Service.clientsEngine.localName);
       let engines = document.getElementById("fxaSyncEngines")
       for (let checkbox of engines.querySelectorAll("checkbox")) {
         checkbox.disabled = !syncReady;
       }
       document.getElementById("fxaChangeDeviceName").disabled = !syncReady;
 
       // Clear the profile image (if any) of the previously logged in account.
@@ -313,19 +312,19 @@ var gSyncPane = {
       }
       return null;
     }).then(data => {
       let fxaLoginStatus = document.getElementById("fxaLoginStatus");
       if (data) {
         if (data.email) {
           // A hack to handle that the user's email address may have changed.
           // This can probably be removed as part of bug 1383663.
-          fxaEmailAddress1Label.textContent = data.email;
-          document.getElementById("fxaEmailAddress2").textContent = data.email;
-          document.getElementById("fxaEmailAddress3").textContent = data.email;
+          fxaEmailAddressLabels.forEach((label) => {
+            label.value = data.email;
+          });
         }
         if (data.displayName) {
           fxaLoginStatus.setAttribute("hasName", true);
           displayNameLabel.hidden = false;
           displayNameLabel.textContent = data.displayName;
         } else {
           fxaLoginStatus.removeAttribute("hasName");
         }

--- a/browser/components/preferences/in-content-new/sync.xul
+++ b/browser/components/preferences/in-content-new/sync.xul
@@ -97,66 +97,64 @@
             <!-- logged in and verified and all is good -->
             <hbox id="fxaLoginVerified" align="center" flex="1">
               <image class="fxaProfileImage actionable"
                      role="button"
                      onclick="gSyncPane.openChangeProfileImage(event);"
                      onkeypress="gSyncPane.openChangeProfileImage(event);"
                      tooltiptext="&profilePicture.tooltip;"/>
               <vbox flex="1" pack="center">
-                <hbox flex="1">
-                  <hbox flex="1" align="center">
-                    <label id="fxaDisplayName" hidden="true"/>
-                    <label id="fxaEmailAddress1"/>
-                  </hbox>
+                <hbox flex="1" align="center">
+                  <label id="fxaDisplayName" hidden="true"/>
+                  <label class="fxaEmailAddress" flex="1" crop="end"/>
                   <button id="fxaUnlinkButton"
                           class="accessory-button"
                           label="&disconnect3.label;"
                           accesskey="&disconnect3.accesskey;"/>
                 </hbox>
                 <hbox>
-                  <html:a id="verifiedManage" class="openLink" target="_blank"
+                  <html:a id="verifiedManage" class="openLink"
                           accesskey="&verifiedManage.accesskey;"
                           onkeypress="gSyncPane.openManageFirefoxAccount(event);">&verifiedManage.label;</html:a>
                 </hbox>
               </vbox>
             </hbox>
 
             <!-- logged in to an unverified account -->
             <hbox id="fxaLoginUnverified">
               <vbox>
                 <image class="fxaProfileImage"/>
               </vbox>
-              <vbox flex="1">
+              <vbox flex="1" pack="center">
                 <hbox>
-                  <vbox><image class="fxaLoginRejectedWarning"/></vbox>
+                  <image class="fxaLoginRejectedWarning"/>
                   <description flex="1">
                     &signedInUnverified.beforename.label;
-                    <label id="fxaEmailAddress2"/>
+                    <label class="fxaEmailAddress"/>
                     &signedInUnverified.aftername.label;
                   </description>
                 </hbox>
                 <hbox class="fxaAccountBoxButtons">
                   <button id="verifyFxaAccount" label="&verify.label;" accesskey="&verify.accesskey;"></button>
                   <button id="unverifiedUnlinkFxaAccount" label="&forget.label;" accesskey="&forget.accesskey;"></button>
                 </hbox>
               </vbox>
             </hbox>
 
             <!-- logged in locally but server rejected credentials -->
             <hbox id="fxaLoginRejected">
               <vbox>
                 <image class="fxaProfileImage"/>
               </vbox>
-              <vbox flex="1">
+              <vbox flex="1" pack="center">
                 <hbox>
-                  <vbox><image class="fxaLoginRejectedWarning"/></vbox>
+                  <image class="fxaLoginRejectedWarning"/>
                   <description flex="1">
                     &signedInLoginFailure.beforename.label;
-                    <label id="fxaEmailAddress3"/>
+                    <label class="fxaEmailAddress"/>
                     &signedInLoginFailure.aftername.label;
                   </description>
                 </hbox>
                 <hbox class="fxaAccountBoxButtons">
                   <button id="rejectReSignIn" label="&signIn.label;" accesskey="&signIn.accesskey;"></button>
                   <button id="rejectUnlinkFxaAccount" label="&forget.label;" accesskey="&forget.accesskey;"></button>
                 </hbox>
               </vbox>

--- a/browser/themes/shared/incontentprefs/preferences.inc.css
+++ b/browser/themes/shared/incontentprefs/preferences.inc.css
@@ -561,30 +561,29 @@ separator.thin:not([orient="vertical"]) 
   line-height: 30px;
   cursor: pointer;
 }
 
 .openLink:visited {
   color: var(--in-content-link-color);
 }
 
-#fxaLoginStatus[hasName] #fxaEmailAddress1 {
-  font-size: 1.1rem;
+#fxaDisplayName {
+  font-weight: bold;
+  margin-inline-end: 10px !important;
 }
 
-#fxaEmailAddress1,
-#fxaEmailAddress2,
-#fxaEmailAddress3 {
-  word-break: break-all;
+.fxaEmailAddress {
+  margin-inline-end: 8px !important;
 }
 
 .fxaLoginRejectedWarning {
   list-style-image: url(chrome://browser/skin/warning.svg);
-  filter: drop-shadow(0 1px 0 hsla(206, 50%, 10%, .15));
-  margin: 4px 8px 0px 0px;
+  margin-inline-start: 4px;
+  margin-inline-end: 8px;
 }
 
 #fxaSyncEngines > vbox > checkbox {
   max-width: 224px;
 }
 
 .fxaMobilePromo {
   margin: 2px 0 32px 0 !important;