Improved the members table on mobile

no issue

ghost/admin/app/styles/components/lists.css

@@ -492,6 +492,14 @@ ul.nostyle li {
     background: var(--whitegrey-l2);
 }
 
+@media (min-width: 1450px) {
+    .gh-list-sticky,
+    .gh-list-scrolling {
+        height: calc(100vh - 96px);
+    }
+}
+
+
 @media (max-width: 800px) {
     .gh-list-sticky,
     .gh-list-scrolling {
@@ -504,9 +512,9 @@ ul.nostyle li {
     }
 }
 
-@media (min-width: 1450px) {
+@media (max-width: 450px) {
     .gh-list-sticky,
     .gh-list-scrolling {
-        height: calc(100vh - 96px);
+        height: calc(100vh - 205px);
     }
 }

ghost/admin/app/styles/layouts/main.css

@@ -1488,6 +1488,10 @@
     .gh-canvas-title svg {
         margin: 0 5px;
     }
+
+    .gh-canvas-title span.gh-canvas-title-hide-for-mobile {
+        display: none;
+    }
 }
 
 
@@ -1554,6 +1558,11 @@
     align-items: center;
 }
 
+.view-actions-secondary {
+    display: flex;
+    align-items: center;
+}
+
 .view-container,
 .view-content {
     position: relative;

ghost/admin/app/styles/layouts/members.css

@@ -402,7 +402,6 @@ p.gh-members-list-email {
 
     .gh-list h3.gh-members-name-noname {
         overflow: hidden;
-        margin-top: -14px;
         text-overflow: ellipsis;
         white-space: nowrap;
     }
@@ -458,14 +457,17 @@ p.gh-members-list-email {
         min-height: 120px;
     }
 
-    .gh-canvas-header.break.tablet .gh-canvas-header-content {
-        height: 160px;
+    .members-header.gh-canvas-header.break.tablet .gh-canvas-header-content {
+        height: 140px;
     }
 
-    .members-header .gh-canvas-title {
-        position: absolute;
-        top: 29px;
-        left: 21px;
+    .members-header.gh-canvas-header.break.tablet .view-actions {
+        top: 0;
+    }
+
+    .members-header.gh-canvas-header.break.tablet .view-actions-bottom-row {
+        width: 100% !important;
+        max-width: 100% !important;
     }
 
     .members-header .view-actions {
@@ -473,6 +475,10 @@ p.gh-members-list-email {
         width: 100%;
     }
 
+    .members-header .view-actions-secondary {
+        display: none;
+    }
+
     .members-header .view-actions .gh-members-header-search {
         width: 100%;
     }
@@ -2355,3 +2361,23 @@ p.gh-members-import-errordetail:first-of-type {
         width: calc(100% - 100px);
     }
 }
+
+@media (max-width: 800px) {
+    .members-header {
+        left: 0;
+    }
+
+    .members-header .gh-canvas-title {
+        left: 25px;
+    }
+}
+
+@media (max-width: 430px) {
+    .members-header .view-actions .gh-contentfilter {
+        border-right: 1px solid var(--whitegrey-d1);
+    }
+
+    .gh-contentfilter-menu:last-of-type {
+        padding-right: 8px;
+    }
+}

ghost/admin/app/templates/member.hbs

@@ -4,7 +4,7 @@
             <LinkTo @route="members" data-test-link="members-back">Members</LinkTo>
             <span>{{svg-jar "arrow-right"}}</span>
             {{#if this.member.isNew}}
-                New member
+                New<span class="gh-canvas-title-hide-for-mobile">&nbsp;member</span>
             {{else}}
                 {{or this.member.name this.member.email}}
             {{/if}}

ghost/admin/app/templates/members.hbs

@@ -22,6 +22,7 @@
                 </div>
 
                 <div class="view-actions-top-row">
+                    <div class="view-actions-secondary">
                         <Members::Filter
                             @isFiltered={{this.isFiltered}}
                             @onApplyFilter={{this.applyFilter}}
@@ -96,6 +97,7 @@
                                 {{/if}}
                             </GhDropdown>
                         </span>
+                    </div>
                     <LinkTo @route="member.new" class="gh-btn gh-btn-primary" data-test-new-member-button="true"><span>New member</span></LinkTo>
                 </div>
             </section>