UX: style improvements to new user tables (#20530)

app/assets/javascripts/admin/addon/templates/users-list-show.hbs

@@ -241,7 +241,13 @@
               </div>
             {{/if}}
 
-            <div class="directory-table__cell user-status">
+            <div
+              class="directory-table__cell user-role{{if
+                  (or user.admin user.moderator user.second_factor_enabled)
+                  ''
+                  '--empty'
+                }}"
+            >
               <span class="directory-table__label">
                 <span>{{i18n "admin.users.status"}}</span>
               </span>

app/assets/javascripts/discourse/app/templates/group-index.hbs

@@ -174,7 +174,12 @@
                   {{bound-date m.added_at}}
                 </span>
               </div>
-              <div class="directory-table__cell">
+              <div
+                class="directory-table__cell{{unless
+                    m.last_posted_at
+                    '--empty'
+                  }}"
+              >
                 {{#if m.last_posted_at}}
                   <span class="directory-table__label">
                     <span>{{i18n "last_post"}}</span>
@@ -184,7 +189,9 @@
                   {{bound-date m.last_posted_at}}
                 </span>
               </div>
-              <div class="directory-table__cell">
+              <div
+                class="directory-table__cell{{unless m.last_seen_at '--empty'}}"
+              >
                 {{#if m.last_seen_at}}
                   <span class="directory-table__label">
                     <span>{{i18n "last_seen"}}</span>

app/assets/javascripts/discourse/app/templates/group-requests.hbs

@@ -30,9 +30,9 @@
             @labelKey="groups.member_requested"
             @automatic={{true}}
           />
-          <div class="directory-table__column-header">{{i18n
+          <div
-              "groups.requests.reason"
+            class="directory-table__column-header group-request-reason__column-header"
-            }}</div>
+          >{{i18n "groups.requests.reason"}}</div>
           <div class="directory-table__column-header"></div>
         </:header>
         <:body>
@@ -49,7 +49,7 @@
                   <span>{{bound-date m.requested_at}}</span>
                 </span>
               </div>
-              <div class="directory-table__cell">
+              <div class="directory-table__cell group-request-reason__content">
                 <span class="directory-table__label">
                   <span>{{i18n "groups.requests.reason"}}</span>
                 </span>

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

@@ -132,6 +132,7 @@
     border-bottom: 1px solid var(--primary-low);
     justify-content: center;
     align-items: center;
+    box-sizing: border-box;
   }
 
   &__column-header {
@@ -260,6 +261,7 @@
     &__value {
       font-size: var(--font-0);
       color: var(--primary);
+      align-self: start;
     }
 
     &__row {
@@ -269,8 +271,8 @@
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(11em, 1fr));
       border-bottom: 1px solid var(--primary-low);
-      padding: 0.85em 0.75em 1em;
+      padding: 0.85em 0.5em 1em;
-      gap: 0 15%;
+      gap: 0 10%;
     }
 
     &__header {
@@ -303,5 +305,9 @@
         }
       }
     }
+
+    [class*="--empty"] {
+      display: none;
+    }
   }
 }

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

@@ -154,7 +154,7 @@ table.group-manage-logs {
   }
 
   &.group-members__requests {
-    grid-template-columns: 3fr repeat(3, minmax(min-content, 1fr));
+    grid-template-columns: 3fr repeat(3, minmax(max-content, 1fr));
   }
 
   .directory-table__value {
@@ -166,7 +166,27 @@ table.group-manage-logs {
     gap: 0.5em;
   }
 
+  [class*="group-request-reason__"] {
+    justify-content: start;
+  }
+
+  .group-request-reason__content {
+    .directory-table__value {
+      white-space: normal;
+      max-width: 30em;
+    }
+  }
+
   @container (max-width: 47em) {
+    .directory-table__cell {
+      grid-column-start: 1;
+      grid-column-end: -1;
+    }
+
+    .group-accept-deny-buttons {
+      justify-content: start;
+    }
+
     .directory-table__cell.group-owner {
       order: 2;
     }

app/assets/stylesheets/mobile/group.scss

@@ -16,10 +16,6 @@
   position: relative;
 }
 
-.group-accept-deny-buttons {
-  justify-content: start;
-}
-
 .group-info {
   flex-wrap: wrap;
   .group-details-button button {