From b4f7a1b761ca4613bbd4a759ce0b496c2de014e5 Mon Sep 17 00:00:00 2001
From: "Ella E." <ella@discourse.org>
Date: Wed, 6 Nov 2024 18:38:25 -0700
Subject: [PATCH] UX: Apply admin table classes for consistent mobile styling
 on the API keys page (#29630)

* UX: Apply admin table classes for consistent mobile styling on the API keys page

* apply prettier
---
 .../admin/addon/templates/api-keys-index.hbs  | 31 +++++++++------
 app/assets/stylesheets/common/admin/api.scss  | 39 +++----------------
 2 files changed, 26 insertions(+), 44 deletions(-)

diff --git a/app/assets/javascripts/admin/addon/templates/api-keys-index.hbs b/app/assets/javascripts/admin/addon/templates/api-keys-index.hbs
index 5845aab6135..b331a95edca 100644
--- a/app/assets/javascripts/admin/addon/templates/api-keys-index.hbs
+++ b/app/assets/javascripts/admin/addon/templates/api-keys-index.hbs
@@ -7,7 +7,7 @@
 
 {{#if this.model}}
   <LoadMore @selector=".api-keys tr" @action={{action "loadMore"}}>
-    <table class="api-keys grid">
+    <table class="d-admin-table api-keys">
       <thead>
         <th>{{i18n "admin.api.key"}}</th>
         <th>{{i18n "admin.api.description"}}</th>
@@ -18,16 +18,21 @@
       </thead>
       <tbody>
         {{#each this.model as |k|}}
-          <tr class={{if k.revoked_at "revoked"}}>
-            <td class="key">
+          <tr class="d-admin-row__content {{if k.revoked_at 'revoked'}}">
+            <td class="d-admin-row__overview key">
               {{#if k.revoked_at}}{{d-icon "circle-xmark"}}{{/if}}
               {{k.truncatedKey}}
             </td>
-            <td class="key-description">
+            <td class="d-admin-row__detail key-description">
+              <div class="d-admin-row__mobile-label">{{i18n
+                  "admin.api.description"
+                }}</div>
               {{k.shortDescription}}
             </td>
-            <td class="key-user">
-              <div class="label">{{i18n "admin.api.user"}}</div>
+            <td class="d-admin-row__detail key-user">
+              <div class="d-admin-row__mobile-label">{{i18n
+                  "admin.api.user"
+                }}</div>
               {{#if k.user}}
                 <LinkTo @route="adminUser" @model={{k.user}}>
                   {{avatar k.user imageSize="small"}}
@@ -36,19 +41,23 @@
                 {{i18n "admin.api.all_users"}}
               {{/if}}
             </td>
-            <td class="key-created">
-              <div class="label">{{i18n "admin.api.created"}}</div>
+            <td class="d-admin-row__detail key-created">
+              <div class="d-admin-row__mobile-label">{{i18n
+                  "admin.api.created"
+                }}</div>
               {{format-date k.created_at}}
             </td>
-            <td class="key-last-used">
-              <div class="label">{{i18n "admin.api.last_used"}}</div>
+            <td class="d-admin-row__detail key-last-used">
+              <div class="d-admin-row__mobile-label">{{i18n
+                  "admin.api.last_used"
+                }}</div>
               {{#if k.last_used_at}}
                 {{format-date k.last_used_at}}
               {{else}}
                 {{i18n "admin.api.never_used"}}
               {{/if}}
             </td>
-            <td class="key-controls">
+            <td class="d-admin-row__controls key-controls">
               <DButton
                 @action={{route-action "show" k}}
                 @icon="far-eye"
diff --git a/app/assets/stylesheets/common/admin/api.scss b/app/assets/stylesheets/common/admin/api.scss
index 607daf52c35..92cba35da94 100644
--- a/app/assets/stylesheets/common/admin/api.scss
+++ b/app/assets/stylesheets/common/admin/api.scss
@@ -48,43 +48,16 @@ table.web-hooks.grid {
 table.api-keys {
   margin-bottom: 0.25em;
 
-  .key-controls {
-    text-align: right;
-  }
-
   tr.revoked {
     color: var(--primary-medium);
   }
 
-  @include breakpoint(tablet) {
-    tr {
-      grid-template-columns: 0.25fr 1fr 1fr;
-    }
-    td.key {
-      grid-row: 1;
-      grid-column-start: 1;
-      grid-column-end: 1;
-      max-width: 100%;
-    }
-    td.key-description {
-      grid-row: 1;
-      grid-column-start: 2;
-      grid-column-end: -1;
-      max-width: 100%;
-    }
-    td.key-user {
-      grid-row: 2;
-      grid-column-start: 1;
-    }
-    td.key-controls {
-      grid-row: 2;
-      grid-column-end: -1;
-      grid-column-start: 2;
-      text-align: right;
-      .btn {
-        margin-bottom: 0.25em;
-      }
-    }
+  .d-admin-row__overview.key {
+    width: 30%;
+  }
+
+  .d-admin-row__content td {
+    vertical-align: middle;
   }
 }