Fixed several responsiveness issues in members list

No issue

- Member email is cut off when overflowing on mobile
- Not displaying date moment-from-now and chevron on mobile
- Fixed left alignment issue for geolocation when there's no open rate

app/components/gh-members-list-item.hbs

@@ -12,7 +12,7 @@
         <LinkTo @route="member" @model={{@member}}  title="Member details" class="gh-list-data gh-members-list-basic">
             <div class="flex items-center">
                 <GhMemberAvatar @member={{@member}} @containerClass="w9 h9 mr3 flex-shrink-0" />
-                <div>
+                <div class="w-80">
                     <h3 class="ma0 pa0 gh-members-list-name {{if (not @member.name) "gh-members-name-noname"}}">{{or @member.name @member.email}}</h3>
                     {{#if @member.name}}
                         <p class="ma0 pa0 middarkgrey f8 gh-members-list-email">{{@member.email}}</p>
@@ -22,7 +22,7 @@
         </LinkTo>
 
         {{#if (feature "emailAnalytics")}}
-            <LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data gh-members-list-open-rate middarkgrey f8">
+            <LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data gh-members-list-open-rate middarkgrey f8 {{if (not @member.name) "gh-members-list-open-rate-noname"}}">
                 {{#if (not (is-empty @member.emailOpenRate))}}
                     <span class="gh-members-list-open-rate-mobile">{{@member.emailOpenRate}}%</span>
                 {{/if}}
@@ -48,7 +48,7 @@
         <LinkTo @route="member" @model={{@member}} title="Member details" class="gh-list-data gh-members-list-subscribed-at middarkgrey f8 {{if (not @member.name) "gh-members-subscribed-noname"}}">
             {{#if @member.createdAtUTC}}
                 {{moment-format @member.createdAtUTC "D MMM YYYY"}}
-                <span class="midlightgrey">({{moment-from-now @member.createdAtUTC}})</span>
+                <span class="midlightgrey gh-members-list-subscribed-moment">({{moment-from-now @member.createdAtUTC}})</span>
             {{/if}}
         </LinkTo>
 

app/styles/layouts/members.css

@@ -321,7 +321,10 @@ p.gh-members-list-email {
     }
 
     .gh-list h3.gh-members-name-noname {
+        overflow: hidden;
         margin-top: -14px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
     }
 
     .gh-members-subscribed-noname {
@@ -337,15 +340,21 @@ p.gh-members-list-email {
         padding: 0 0 0 64px;
     }
 
+    .gh-members-list-open-rate-noname {
+        margin-top: -32px;
+        padding-bottom: 16px;
+    }
+
     .gh-members-list-open-rate-mobile::after {
-        content: " open rate •";
+        content: " open rate • ";
+        white-space: pre;
     }
 
     .gh-members-list-geolocation {
         display: inline-block;
         width: auto;
         margin-top: -16px;
-        padding: 0 0 0 4px;
+        padding: 0;
     }
 
     .gh-members-list-geolocation::after {
@@ -358,6 +367,16 @@ p.gh-members-list-email {
     }
 }
 
+@media (max-width: 600px) {
+    .gh-members-list-subscribed-moment {
+        display: none;
+    }
+    
+    .gh-members-list-chevron {
+        display: none;
+    }
+}
+
 @media (max-width: 450px) {
     .members-header {
         justify-content: flex-end;