From ea2a0f2c8e1c0ab4d08377b604c858d28a35d5c9 Mon Sep 17 00:00:00 2001
From: "Ella E." <ella@discourse.org>
Date: Tue, 26 Nov 2024 22:08:52 -0700
Subject: [PATCH] DEV: refactor SCSS structure for admin table styling (#29953)

---
 .../admin/addon/templates/backups-index.hbs   |  4 +--
 .../addon/templates/permalinks-index.hbs      |  4 +--
 .../stylesheets/common/admin/admin_table.scss |  6 ++--
 app/assets/stylesheets/common/admin/api.scss  |  4 ---
 .../stylesheets/common/admin/backups.scss     |  1 -
 .../stylesheets/common/admin/customize.scss   | 28 -------------------
 .../stylesheets/common/admin/flags.scss       | 12 --------
 .../stylesheets/common/admin/plugins.scss     | 15 ++++++++--
 8 files changed, 19 insertions(+), 55 deletions(-)

diff --git a/app/assets/javascripts/admin/addon/templates/backups-index.hbs b/app/assets/javascripts/admin/addon/templates/backups-index.hbs
index c34c37da1ff..26da5482cae 100644
--- a/app/assets/javascripts/admin/addon/templates/backups-index.hbs
+++ b/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>
diff --git a/app/assets/javascripts/admin/addon/templates/permalinks-index.hbs b/app/assets/javascripts/admin/addon/templates/permalinks-index.hbs
index 23e0ab19f8d..f7929430151 100644
--- a/app/assets/javascripts/admin/addon/templates/permalinks-index.hbs
+++ b/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}}
diff --git a/app/assets/stylesheets/common/admin/admin_table.scss b/app/assets/stylesheets/common/admin/admin_table.scss
index 0516d7e9914..3b247ca8126 100644
--- a/app/assets/stylesheets/common/admin/admin_table.scss
+++ b/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;
       }
     }
   }
diff --git a/app/assets/stylesheets/common/admin/api.scss b/app/assets/stylesheets/common/admin/api.scss
index 92cba35da94..130fc4f6cab 100644
--- a/app/assets/stylesheets/common/admin/api.scss
+++ b/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 {
diff --git a/app/assets/stylesheets/common/admin/backups.scss b/app/assets/stylesheets/common/admin/backups.scss
index af7ce47dacb..05127484ac8 100644
--- a/app/assets/stylesheets/common/admin/backups.scss
+++ b/app/assets/stylesheets/common/admin/backups.scss
@@ -11,7 +11,6 @@
     }
 
     .backup-filename {
-      width: 80%;
       text-wrap: balance;
     }
   }
diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss
index 8a0978a8b5c..6107e3428f2 100644
--- a/app/assets/stylesheets/common/admin/customize.scss
+++ b/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;
diff --git a/app/assets/stylesheets/common/admin/flags.scss b/app/assets/stylesheets/common/admin/flags.scss
index 28122027e40..baa7c43b41c 100644
--- a/app/assets/stylesheets/common/admin/flags.scss
+++ b/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 {
diff --git a/app/assets/stylesheets/common/admin/plugins.scss b/app/assets/stylesheets/common/admin/plugins.scss
index fa2eb899e95..76467d11635 100644
--- a/app/assets/stylesheets/common/admin/plugins.scss
+++ b/app/assets/stylesheets/common/admin/plugins.scss
@@ -7,10 +7,21 @@
     }
   }
 
-  .admin-plugins-list {
-    .plugin-version {
+  .d-admin-table.admin-plugins-list {
+    .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;
       }
     }