From 3429ac69344d6700df945429b9fcacebcf47d9df Mon Sep 17 00:00:00 2001
From: James Morris <james.morris@ghost.org>
Date: Fri, 7 Jan 2022 10:58:57 +0000
Subject: [PATCH] Fixed various tiny tweaks for members scrollable table

- double scrollbars showing at certain widths
- strange resizing of search members text box
- borders showing through when scrolling
- tidying table horizontal scrolling when viewport is narrower
---
 ghost/admin/app/styles/app-dark.css         |  2 +-
 ghost/admin/app/styles/components/lists.css | 48 +++++++++++++++++----
 ghost/admin/app/styles/layouts/members.css  |  7 ---
 3 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/ghost/admin/app/styles/app-dark.css b/ghost/admin/app/styles/app-dark.css
index 7edeae7c82..0648a50e14 100644
--- a/ghost/admin/app/styles/app-dark.css
+++ b/ghost/admin/app/styles/app-dark.css
@@ -1042,7 +1042,7 @@ input:focus,
     right: -2px;
 }
 
-.gh-list-scrolling thead th {
+.gh-list-scrolling thead th:first-child {
     background: linear-gradient(90deg, rgba(21,23,25,1) 90%, rgba(21,23,25,0) 100%);
 }
 
diff --git a/ghost/admin/app/styles/components/lists.css b/ghost/admin/app/styles/components/lists.css
index d87a7ae5ed..8c5f817776 100644
--- a/ghost/admin/app/styles/components/lists.css
+++ b/ghost/admin/app/styles/components/lists.css
@@ -313,9 +313,9 @@ ul.nostyle li {
     position: relative;
     overflow: scroll;
     max-width: calc(100% + 96px);
-    height: calc(100vh - 96px);
+    height: calc(100vh - 129px);
     margin: 0 -48px -81px;
-    padding: 0 48px 0 0;
+    padding: 0 48px;
 }
 
 .gh-list-scrolling table {
@@ -325,6 +325,13 @@ ul.nostyle li {
     border-bottom: none;
 }
 
+.gh-list-scrolling thead tr {
+    background: var(--main-bg-color);
+    position: sticky;
+    top: 0;
+    z-index: 2;
+}
+
 .gh-list-scrolling thead th {
     position: sticky;
     top: 0;
@@ -333,8 +340,6 @@ ul.nostyle li {
     font-weight: 500;
     letter-spacing: 0.1px;
     color: var(--black);
-    background: var(--main-bg-color);
-    background: linear-gradient(90deg, rgba(255,255,255,1) 90%, rgba(255,255,255,0) 100%);
     border-bottom: var(--whitegrey) 1px solid;
     padding: 10px 20px;
     text-transform: uppercase;
@@ -343,9 +348,19 @@ ul.nostyle li {
 
 .gh-list-scrolling thead th:first-child {
     left: 0;
-    z-index: 1;
+    z-index: 3;
     border-bottom: none;
-    padding: 0 60px 0 48px;
+    padding: 0 60px 0 0;
+    background: linear-gradient(90deg, rgba(255,255,255,1) 90%, rgba(255,255,255,0) 100%);
+}
+
+.gh-list-scrolling thead th:first-child::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 40px;
+    height: 100%;
+    background: green;
 }
 
 .gh-list-scrolling tbody .gh-list-data:first-child {
@@ -354,7 +369,7 @@ ul.nostyle li {
     border-bottom: none;
     background: var(--main-bg-color);
     background: linear-gradient(90deg, rgba(255,255,255,1) 90%, rgba(255,255,255,0) 100%);
-    padding: 0 60px 0 48px;
+    padding: 0 60px 0 0;
 }
 
 .gh-list-scrolling thead th:first-child::before,
@@ -363,7 +378,7 @@ ul.nostyle li {
     content: "";
     bottom: 0;
     right: 0;
-    left: 48px;
+    left: 0;
     height: 1px;
     background: var(--whitegrey);
 }
@@ -383,3 +398,20 @@ ul.nostyle li {
     border-top: none;
     border-bottom: var(--whitegrey) 1px solid;
 }
+
+@media (max-width: 800px) {
+    .gh-list-scrolling {
+        max-width: calc(100% + 8vw);
+        height: calc(100vh - 193px);
+        margin-left: -4vw;
+        margin-right: -4vw;
+        padding-left: 4vw;
+        padding-right: 4vw;
+    }
+}
+
+@media (min-width: 1450px) {
+    .gh-list-scrolling {
+        height: calc(100vh - 96px);
+    }
+}
diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css
index 7d4747dee5..663eabdcc7 100644
--- a/ghost/admin/app/styles/layouts/members.css
+++ b/ghost/admin/app/styles/layouts/members.css
@@ -287,13 +287,6 @@ p.gh-members-list-email {
     text-transform: uppercase;
 }
 
-@media  (min-width: 1200px) and (max-width: 1370px) {
-    .members-header .view-actions input.gh-members-list-searchfield {
-        max-width: 130px;
-        min-width: unset;
-    }
-}
-
 @media (max-width: 1100px) {
     .gh-members-chart-summary-data {
         font-size: 2.8rem;