From a76465b5ee86ab21383640a5bd91ada80c5c18a3 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Thu, 28 May 2020 12:59:34 +0100
Subject: [PATCH] Fixed columns resizing whilst scrolling members list

no issue

- the members list uses occluded rendering to keep scrolling performance high but this will cause constant reflows of the table contents whilst scrolling because contents are swapped in and out causing the browser to adjust the column widths to match longest/shortest content in the currently rendered set of rows
- applying `table-layout: fixed` to the table means that columns will always match the sizes defined by the first row of the table (in this case the header) ensuring that there is no dynamic resizing whilst scrolling
---
 ghost/admin/app/styles/layouts/members.css | 6 +++++-
 ghost/admin/app/templates/members.hbs      | 6 +++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css
index 83a9189d34..92ca7ddbe5 100644
--- a/ghost/admin/app/styles/layouts/members.css
+++ b/ghost/admin/app/styles/layouts/members.css
@@ -45,6 +45,10 @@
 /* Members list
 /* ----------------------------------------- */
 
+.members-list {
+    table-layout: fixed;
+}
+
 .members-header .view-actions input.gh-members-list-searchfield {
     min-width: 220px;
     padding-left: 30px;
@@ -160,7 +164,7 @@ p.gh-members-list-email {
 }
 
 .gh-members-not-found-for-label {
-    
+
 }
 
 /* .members-header .gh-member */
diff --git a/ghost/admin/app/templates/members.hbs b/ghost/admin/app/templates/members.hbs
index 612504a7b2..82f5a954d7 100644
--- a/ghost/admin/app/templates/members.hbs
+++ b/ghost/admin/app/templates/members.hbs
@@ -58,9 +58,9 @@
                     {{#if this.members}}
                         <li class="gh-list-row header">
                             <div class="gh-list-header">{{this.listHeader}}</div>
-                            <div class="gh-list-header gh-list-cellwidth-20 nowrap">Location</div>
-                            <div class="gh-list-header gh-list-cellwidth-20 nowrap">Created</div>
-                            <div class="gh-list-header gh-list-cellwidth-chevron"></div>
+                            <div class="gh-list-header gh-members-list-geolocation gh-list-cellwidth-20 nowrap">Location</div>
+                            <div class="gh-list-header gh-members-list-subscribed-at gh-list-cellwidth-20 nowrap">Created</div>
+                            <div class="gh-list-header gh-members-list-chevron gh-list-cellwidth-chevron"></div>
                         </li>
                         <VerticalCollection @items={{this.members}} @key="id" @containerSelector=".gh-main" @estimateHeight={{69}} @staticHeight={{true}} @bufferSize={{20}} as |member|>
                             <GhMembersListItem @member={{member}} @data-test-member-id={{member.id}} />