From 4a6e1615894f998d8e286e26f8fd27371d0a103a Mon Sep 17 00:00:00 2001
From: Josh Smith <josh@codecorps.org>
Date: Tue, 7 Nov 2017 14:02:01 -0800
Subject: [PATCH 1/2] Fix user skills list display

---
 app/styles/components/user/skills-list.scss | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/styles/components/user/skills-list.scss b/app/styles/components/user/skills-list.scss
index ec0ec69c8..b01dda241 100644
--- a/app/styles/components/user/skills-list.scss
+++ b/app/styles/components/user/skills-list.scss
@@ -1,15 +1,14 @@
 .user__skills-list {
   ul {
-    align-items: flex-start;
-    display: flex;
     margin-top: 10px;
 
     li {
       background: #E8EBED;
       border-radius: 2px;
       color: #333;
+      display: inline-block;
       font-weight: 600;
-      margin-right: 5px;
+      margin: 0 3px 5px 0;
       padding: 4px 7px;
     }
   }

From d5b56c5f4eee3d8d21651884829d7070383f6bad Mon Sep 17 00:00:00 2001
From: Josh Smith <josh@codecorps.org>
Date: Tue, 7 Nov 2017 14:42:00 -0800
Subject: [PATCH 2/2] Fix contributors list styles

---
 app/styles/components/user-list-item.scss     | 81 ++++++++++++++++---
 .../project/settings/contributors.scss        |  2 +-
 app/templates/components/user-list-item.hbs   | 38 ++++-----
 tests/pages/components/user-list-item.js      |  4 +-
 4 files changed, 92 insertions(+), 33 deletions(-)

diff --git a/app/styles/components/user-list-item.scss b/app/styles/components/user-list-item.scss
index fcdf59670..5b71a2eec 100644
--- a/app/styles/components/user-list-item.scss
+++ b/app/styles/components/user-list-item.scss
@@ -1,10 +1,13 @@
 .user-list-item {
   @include outer-container;
-  align-items: center;
   border-top: 1px solid $gray--lightest;
-  display: flex;
   padding: .7em 1em;
   position: relative;
+
+  @include media($sm-screen) {
+    padding: .7em 0;
+  }
+
   &:hover {
     background-color: #F9F9F9;
   }
@@ -14,21 +17,75 @@
 }
 
 .project-user {
-  &__actions {
-    @include span-columns(2);
-    text-align: right;
-  }
-  &__avatar {
-    @include span-columns(1);
+  &__user {
+    @include span-columns(4);
+
+    @include media($sm-screen) {
+      @include span-columns(12);
+
+      .icon {
+        height: 40px;
+        width: 40px;
+      }
+    }
+
+    &__avatar {
+      float: left;
+    }
+
+    &__name {
+      padding: 5px 10px 5px 60px;
+
+      @include media($sm-screen) {
+        padding: 2px 0 2px 50px;
+      }
+
+      strong {
+        font-weight: 700;
+      }
+    }
   }
-  &__name {
+
+  &__actions {
     @include span-columns(3);
-    strong {
-      font-weight: 700;
+
+    text-align: left;
+
+    button {
+      margin-top: 5px;
+    }
+
+    @include media($sm-screen) {
+      @include span-columns(12);
+      display: flex;
+      justify-content: space-between;
+      button {
+        flex: 1;
+        margin-right: 5px;
+        &:last-of-type {
+          margin-right: 0;
+        }
+      }
     }
   }
+
   &__skills {
-    @include span-columns(6);
+    @include span-columns(5);
+    padding-top: 5px;
+
+    @include media($sm-screen) {
+      @include span-columns(12);
+      padding-left: 50px;
+
+      h4 {
+        display: none;
+      }
+
+      .user__skills-list ul {
+        margin: 0;
+      }
+    }
+
     font-size: $body-font-size-small;
   }
 }
diff --git a/app/styles/templates/project/settings/contributors.scss b/app/styles/templates/project/settings/contributors.scss
index ae01f2c0d..08f9d96fc 100644
--- a/app/styles/templates/project/settings/contributors.scss
+++ b/app/styles/templates/project/settings/contributors.scss
@@ -16,5 +16,5 @@
 .contributors-list--empty {
   background: $background-gray;
   border-radius: 4px;
-  padding: 20px 60px;
+  padding: 5px 20px;
 }
diff --git a/app/templates/components/user-list-item.hbs b/app/templates/components/user-list-item.hbs
index fbc8d27cc..4328ca606 100644
--- a/app/templates/components/user-list-item.hbs
+++ b/app/templates/components/user-list-item.hbs
@@ -1,24 +1,26 @@
-<div class="project-user__avatar">
-  {{#link-to 'slugged-route' user.username}}
-    <img class="icon" src= {{user.photoThumbUrl}} />
-  {{/link-to}}
-</div>
+<div class="project-user__user">
+  <div class="project-user__user__avatar">
+    {{#link-to 'slugged-route' user.username}}
+      <img class="icon" src= {{user.photoThumbUrl}} />
+    {{/link-to}}
+  </div>
 
-<div class="project-user__name">
-  <strong>
-  {{#if user.name}}
-    {{link-to user.name 'slugged-route' user.username}}
-  {{else}}
-    {{link-to user.username 'slugged-route' user.username}}
-  {{/if}}
-  </strong>
-  <br>
-  <span>
-    {{user.username}}
-  </span>
+  <div data-test-project-user-name class="project-user__user__name">
+    <strong>
+    {{#if user.name}}
+      {{link-to user.name 'slugged-route' user.username}}
+    {{else}}
+      {{link-to user.username 'slugged-route' user.username}}
+    {{/if}}
+    </strong>
+    <br>
+    <span>
+      {{user.username}}
+    </span>
+  </div>
 </div>
 
-<div class="project-user__skills">
+<div data-test-project-user-skills class="project-user__skills">
   <h4>Skills</h4>
   {{user/skills-list data-test-user-skills-list user=user}}
 </div>
diff --git a/tests/pages/components/user-list-item.js b/tests/pages/components/user-list-item.js
index ea9ca27af..161fccc39 100644
--- a/tests/pages/components/user-list-item.js
+++ b/tests/pages/components/user-list-item.js
@@ -40,7 +40,7 @@ export default {
   },
 
   name: {
-    scope: '.project-user__name',
+    scope: '[data-test-project-user-name]',
     name: {
       scope: 'strong',
       text: text()
@@ -52,7 +52,7 @@ export default {
   },
 
   skills: collection({
-    scope: '.project-user__skills',
+    scope: '[data-test-project-user-skills]',
     itemScope: 'li',
     item: {
       text: text()