DEV: refactor SCSS structure for admin table styling (#29953)

app/assets/javascripts/admin/addon/templates/backups-index.hbs

@@ -32,7 +32,7 @@
 <table class="d-admin-table admin-backups-list">
   <thead>
     <th>{{i18n "admin.backups.columns.filename"}}</th>
-    <th>{{i18n "admin.backups.columns.size"}}</th>
+    <th class="backup-size">{{i18n "admin.backups.columns.size"}}</th>
     <th></th>
   </thead>
   <tbody>
@@ -41,7 +41,7 @@
         class="d-admin-row__content backup-item-row"
         data-backup-filename={{backup.filename}}
       >
-        <td class="d-admin-row__detail">
+        <td class="d-admin-row__overview">
           <div class="backup-filename">
             {{backup.filename}}
           </div>

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

@@ -47,7 +47,7 @@
                     pl.key
                   }}
                 >
-                  <td>
+                  <td class="d-admin-row__overview">
                     <FlatButton
                       @title="admin.permalink.copy_to_clipboard"
                       @icon="far-clipboard"
@@ -59,7 +59,7 @@
                       title={{pl.url}}
                     >{{pl.url}}</span>
                   </td>
-                  <td class="destination">
+                  <td class="d-admin-row__detail destination">
                     {{#if pl.topic_id}}
                       <a href={{pl.topic_url}}>{{pl.topic_title}}</a>
                     {{/if}}

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

@@ -27,8 +27,6 @@
 
   td {
     vertical-align: middle;
-    padding-top: var(--space-3);
-    padding-bottom: var(--space-3);
 
     @include breakpoint("tablet") {
       display: block;
@@ -42,8 +40,6 @@
     }
 
     &.d-admin-row__overview {
-      width: 55%;
-
       @include breakpoint("tablet") {
         width: auto;
         border-top: 0;
@@ -59,12 +55,14 @@
 
     &.d-admin-row__controls {
       text-align: right;
+      width: auto;
 
       @include breakpoint("tablet") {
         position: absolute;
         top: -3px;
         right: 0;
         border-top: 0;
+        width: auto;
       }
     }
   }

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

@@ -55,10 +55,6 @@ table.api-keys {
   .d-admin-row__overview.key {
     width: 30%;
   }
-
-  .d-admin-row__content td {
-    vertical-align: middle;
-  }
 }
 
 .admin-api-keys {

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

@@ -11,7 +11,6 @@
     }
 
     .backup-filename {
-      width: 80%;
       text-wrap: balance;
     }
   }

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

@@ -811,15 +811,6 @@
     .loading-container {
       width: 100%;
     }
-    .destination {
-      margin-top: 0.5em;
-    }
-    .d-admin-row__controls-options {
-      padding-bottom: 1em;
-    }
-    td {
-      width: auto;
-    }
   }
   .permalink-search input {
     width: 100%;
@@ -836,25 +827,6 @@
   }
 }
 
-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;

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

@@ -1,15 +1,3 @@
-.admin-flags {
-  table.d-admin-table {
-    td:first-child {
-      width: 70%;
-
-      @include breakpoint("tablet") {
-        width: auto;
-      }
-    }
-  }
-}
-
 .admin-flag-item {
   &__delete.btn,
   &__delete.btn:hover {

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

@@ -7,10 +7,21 @@
     }
   }
 
-  .admin-plugins-list {
+  .d-admin-table.admin-plugins-list {
-    .plugin-version {
+    .admin-plugins-list__version {
+      width: 14%;
+
       @include breakpoint("tablet") {
         text-align: right;
+        width: auto;
+      }
+    }
+
+    .d-admin-row__controls {
+      width: 10%;
+
+      @include breakpoint("tablet") {
+        width: auto;
       }
     }