Fixed overflowing content on mobile for user rows on staff page

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

@@ -11,20 +11,20 @@
             </div>
         </div>
         <div class="apps-card-right">
+            {{#if user.isLocked}}
+                <span class="gh-badge locked">{{svg-jar "lock"}}</span>
+            {{/if}}
             <div class="apps-configured">
                 {{#if user.isSuspended}}
                     <span class="gh-badge suspended">Suspended</span>
                 {{else}}
-                    {{#if user.isLocked}}
-                        <span class="gh-badge locked">{{svg-jar "lock"}}</span>
-                    {{/if}}
                     {{#unless this.session.user.isAuthorOrContributor}}
                         {{#each user.roles as |role|}}
                             <span class="gh-badge {{role.lowerCaseName}}" data-test-role-name>{{role.name}}</span>
                         {{/each}}
                     {{/unless}}
                 {{/if}}
-                {{svg-jar "arrow-right"}}
+                {{svg-jar "arrow-right" class="gh-user-arrow-icon"}}
             </div>
         </div>
     </article>

app/styles/layouts/apps.css

@@ -216,6 +216,15 @@
     align-items: center;
 }
 
+.apps-card-right svg {
+    margin-left: 15px;
+    height: 14px;
+}
+
+.apps-card-right svg path {
+    fill: var(--midgrey);
+}
+
 .apps-configured {
     display: flex;
     align-items: center;
@@ -260,7 +269,7 @@
 .apps-card-meta {
     display: flex;
     flex-direction: column;
-    padding-right: 70px;
+    padding-right: 40px;
 }
 @media (max-width: 500px) {
     .apps-card-meta {
@@ -306,7 +315,7 @@
 }
 @media (min-width: 600px) and (max-width: 1460px) {
     .apps-card-app-desc {
-        padding-right: 80px;
+        padding-right: 24px;
     }
 }
 

app/styles/layouts/users.css

@@ -40,6 +40,12 @@
     }
 }
 
+@media (max-width: 600px) {
+    .gh-user-arrow-icon {
+        display: none;
+    }
+}
+
 
 .user-list-item-icon {
     flex-shrink: 0;
@@ -85,7 +91,6 @@
 }
 
 .gh-team .apps-configured {
-    flex-wrap: wrap;
     justify-content: flex-end;
 }