Fixed scrolling issues on members table (#19833)

ref DES-86 Set fixed widths for different columns on the Members table specifically, so content does not jump up & down anymore as you scroll down the page. --------- Co-authored-by: Peter Zimon <peter.zimon@gmail.com>
TryGhost · Mar 11, 2024 · f0d6a64 · f0d6a64
1 parent b41d9c9
commit f0d6a64
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 28 deletions.
diff --git a/ghost/admin/app/components/members/list-item-loading.hbs b/ghost/admin/app/components/members/list-item-loading.hbs
@@ -1,4 +1,4 @@
-<tr data-test-list="members-list-item">
+<tr data-test-list="members-list-item" class="gh-members-list-row">
     <div class="gh-list-data gh-members-list-basic gh-list-loadingcell">
         <div class="gh-list-loading-title"></div>
         <div class="gh-list-loading-detail"></div>

diff --git a/ghost/admin/app/components/members/list-item.hbs b/ghost/admin/app/components/members/list-item.hbs
@@ -1,6 +1,6 @@
-<tr data-test-list='members-list-item' data-test-member={{@member.id}}>
+<tr data-test-list='members-list-item' data-test-member={{@member.id}} class="gh-members-list-row">
     <LinkTo @route="member" @model={{@member}} @query={{@query}} class="gh-list-data" data-test-table-data="details">
-        <div class="flex items-center">
+        <div class="flex items-center gh-members-list-name-container">
             <GhMemberAvatar @member={{@member}} @containerClass="w9 h9 mr3 flex-shrink-0" />
             <div class="w-80">
                 <h3 class="ma0 pa0 gh-members-list-name {{unless @member.name "gh-members-name-noname"}}">{{or @member.name @member.email}}</h3>

diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css
@@ -315,6 +315,12 @@ p.gh-members-list-email {
     text-transform: uppercase;
 }
 
+.gh-members-list-row .gh-list-data:first-child {
+    width: 30%;
+    min-width: 360px;
+    padding-right: 20px !important;
+}
+
 @media (max-width: 1100px) {
     .gh-members-chart-summary-data {
         font-size: 2.8rem;
@@ -333,6 +339,18 @@ p.gh-members-list-email {
         margin-left: 0;
         margin-right: 0;
     }
+
+    .gh-members-list-row .gh-list-data:first-child {
+        min-width: 280px;
+        overflow-x: hidden;
+    }
+
+    .gh-members-list-email,
+    .gh-members-list-name {
+        max-width: 200px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
 }
 
 @media (min-width: 440px) and (max-width: 1000px) {
@@ -357,31 +375,6 @@ p.gh-members-list-email {
         display: none;
     }
 
-    .gh-members-list-item {
-        display: flex;
-        position: relative;
-        flex-wrap: wrap;
-        border-bottom: 1px solid var(--list-color-divider);
-        margin: 0;
-    }
-
-    .gh-members-list-item:nth-of-type(2) {
-        border-top-left-radius: 5px;
-        border-top-right-radius: 5px;
-    }
-
-    .gh-members-list-item .gh-list-data {
-        border-top: none !important;
-    }
-
-    .gh-members-list-item:hover {
-        background: var(--whitegrey-l2);
-    }
-
-    .gh-members-list-item:hover .gh-list-data {
-        background: none !important;
-    }
-
     .gh-members-list-basic {
         display: block;
         flex: 1 1 100%;