UX: clean up email preference layout (#27136)

app/assets/javascripts/discourse/app/templates/preferences/account.hbs

@@ -35,6 +35,33 @@
         <div class="emails">
           {{#each this.emails as |email|}}
             <div class="row email">
+              <div class="email-first">{{email.email}}</div>
+              <div class="email-second">
+                {{#if email.primary}}
+                  <span class="primary">
+                    {{i18n "user.email.primary_label"}}
+                  </span>
+                {{/if}}
+                {{#unless email.confirmed}}
+                  <span class="unconfirmed">
+                    {{i18n "user.email.unconfirmed_label"}}
+                  </span>
+                  &bull;
+                  {{#if email.resending}}
+                    <span>{{i18n "user.email.resending_label"}}</span>
+                  {{else if email.resent}}
+                    <span>{{i18n "user.email.resent_label"}}</span>
+                  {{else}}
+                    <button
+                      type="button"
+                      class="resend-email-confirmation"
+                      {{on "click" (fn this.resendConfirmationEmail email)}}
+                    >
+                      {{i18n "user.email.resend_label"}}
+                    </button>
+                  {{/if}}
+                {{/unless}}
+              </div>
               {{#if this.model.can_edit_email}}
                 <EmailDropdown
                   @email={{email}}
@@ -42,46 +69,17 @@
                   @destroyEmail={{action "destroyEmail"}}
                 />
               {{/if}}
-
-              <div class="email-first">{{email.email}}</div>
-
-              <div class="email-second">
-                {{#if email.primary}}
-                  <span class="primary">{{i18n
-                      "user.email.primary_label"
-                    }}</span>
-                {{/if}}
-
-                {{#unless email.confirmed}}
-                  <span class="unconfirmed">{{i18n
-                      "user.email.unconfirmed_label"
-                    }}</span>
-                  &bull;
-                  {{#if email.resending}}
-                    <span>{{i18n "user.email.resending_label"}}</span>
-                  {{else if email.resent}}
-                    <span>{{i18n "user.email.resent_label"}}</span>
-                  {{else}}
-                    <a
-                      {{on "click" (fn this.resendConfirmationEmail email)}}
-                      href
-                    >{{i18n "user.email.resend_label"}}</a>
-                  {{/if}}
-                {{/unless}}
-              </div>
             </div>
           {{/each}}
         </div>
 
         {{#if this.canAddEmail}}
-          <LinkTo
-            @route="preferences.email"
-            @query={{hash new=1}}
-            class="pull-right"
-          >
-            {{d-icon "plus"}}
-            {{i18n "user.email.add_email"}}
-          </LinkTo>
+          <div class="controls">
+            <LinkTo @route="preferences.email" @query={{hash new=1}}>
+              {{d-icon "plus"}}
+              {{i18n "user.email.add_email"}}
+            </LinkTo>
+          </div>
         {{/if}}
       {{else}}
         <div class="controls">
@@ -90,7 +88,9 @@
             <LinkTo
               @route="preferences.email"
               class="btn btn-default btn-small btn-icon pad-left no-text"
-            >{{d-icon "pencil-alt"}}</LinkTo>
+            >
+              {{d-icon "pencil-alt"}}
+            </LinkTo>
           {{/if}}
         </div>
       {{/if}}

app/assets/stylesheets/common/base/discourse.scss

@@ -665,26 +665,64 @@ textarea {
 }
 
 .pref-email {
-  .row {
-    border-bottom: 1px solid #ddd;
-    margin: 5px 0px;
-    padding-bottom: 5px;
+  display: grid;
+  grid-template-areas:
+    "title title"
+    "email email"
+    "instructions controls";
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  gap: 0 0.5em;
 
-    &:last-child {
-      border-bottom: 0;
-    }
+  .control-label {
+    grid-area: title;
+  }
+
+  .emails {
+    grid-area: email;
+  }
+
+  .instructions {
+    grid-area: instructions;
+  }
+
+  .controls {
+    margin-top: 0.5em;
+    grid-area: controls;
+  }
+
+  .resend-email-confirmation {
+    background: transparent;
+    border: none;
+    color: var(--tertiary);
+    padding: 0;
+    text-align: left;
+  }
+
+  .row {
+    border-bottom: 1px solid var(--primary-low);
+    padding: 0.25em 0;
+    display: grid;
+    grid-template-areas:
+      "email dropdown"
+      "meta dropdown";
+    grid-template-columns: 1fr auto;
+    grid-template-rows: 1fr auto;
   }
 
   .email-first {
-    font-size: 1.1em;
+    grid-area: email;
+    align-self: center;
+    overflow-wrap: break-word;
+    min-width: 0;
   }
 
   .email-second {
+    grid-area: meta;
     color: var(--primary-medium);
 
     .primary {
       color: var(--success);
-      font-weight: bold;
     }
 
     .unconfirmed {
@@ -693,12 +731,11 @@ textarea {
   }
 
   .email-dropdown {
-    float: right;
-
-    .btn,
-    .btn:hover {
+    grid-area: dropdown;
+    align-self: center;
+    justify-self: end;
+    summary {
       background: transparent;
-
       .d-icon {
         color: var(--primary-high);
       }
@@ -707,10 +744,6 @@ textarea {
 
   .dropdown-menu {
     width: 120px;
-
-    & .icon {
-      margin-top: auto;
-    }
   }
 }