UX: Layout fixes for admin permalinks page (#14819)

app/assets/javascripts/admin/addon/templates/permalinks.hbs

@@ -1,17 +1,21 @@
-<div class="permalink-title">
-  <h2>{{i18n "admin.permalink.title"}}</h2>
-</div>
+<h1>{{i18n "admin.permalink.title"}}</h1>
+
 <div class="permalink-description">
   <span>{{i18n "admin.permalink.description"}}</span>
 </div>
-<div class="permalink-search">
-  {{text-field value=filter class="url-input" placeholderKey="admin.permalink.form.filter" autocorrect="off" autocapitalize="off"}}
-</div>
 {{permalink-form action=(action "recordAdded")}}
-<br>
 
 {{#conditional-loading-spinner condition=loading}}
   {{#if model.length}}
+    <div class="permalink-search">
+      {{text-field
+        value=filter
+        class="url-input"
+        placeholderKey="admin.permalink.form.filter"
+        autocorrect="off"
+        autocapitalize="off"
+      }}
+    </div>
     <table class="admin-logs-table permalinks grid">
       <thead class="heading-container">
         <th class="col heading first url">{{i18n "admin.permalink.url"}}</th>
@@ -21,7 +25,14 @@
       <tbody>
         {{#each model as |pl|}}
           <tr class="admin-list-item">
-            <td class="col first url">{{d-button title="admin.permalink.copy_to_clipboard" icon="far-clipboard" action=(action "copyUrl" pl)}} <span id="admin-permalink-{{pl.id}}" title={{pl.url}}>{{pl.url}}</span></td>
+            <td class="col first url">
+              {{flat-button
+                title="admin.permalink.copy_to_clipboard"
+                icon="far-clipboard"
+                action=(action "copyUrl" pl)
+              }}
+              <span id="admin-permalink-{{pl.id}}" title={{pl.url}}>{{pl.url}}</span>
+            </td>
             <td class="col destination">
               {{#if pl.topic_id}}
                 <a href={{pl.topic_url}}>{{pl.topic_title}}</a>

app/assets/stylesheets/common/admin/customize.scss

@@ -671,12 +671,14 @@
   margin-top: 1em;
   color: var(--primary-medium);
 }
+
 // Permalinks
 .permalinks {
   .url,
   .topic,
   .category,
   .external_url,
+  .destination,
   .post {
     @include ellipsis;
     max-width: 100px;
@@ -690,27 +692,51 @@
   }
 }
 
-.permalink-search {
-  text-align: left;
-  @include breakpoint(tablet, min-width) {
-    text-align: right;
-  }
-}
-
 .permalink-form {
+  padding: 0.5em 1em 0 1em;
+  margin-top: 1em;
+  background: var(--primary-very-low);
   .select-kit {
-    max-width: 200px;
+    max-width: 260px;
+  }
+  @include breakpoint(tablet) {
+    label {
+      width: 100%;
     }
   }
-
-.permalink-title {
-  margin-bottom: 10px;
 }
 
 .permalink-description {
   color: var(--primary-medium);
 }
 
+.permalink-search {
+  margin-top: 2em;
+  input {
+    min-width: 250px;
+    margin-bottom: 0;
+  }
+}
+
+table.permalinks {
+  @include breakpoint(tablet, min-width) {
+    td.url,
+    th.url {
+      width: 33%;
+    }
+
+    th.destination,
+    td.destination {
+      width: 60%;
+    }
+  }
+  @include breakpoint(tablet) {
+    td.url .btn-flat {
+      display: none;
+    }
+  }
+}
+
 // embedding
 .embeddable-hosts {
   margin-bottom: 2em;