1 files changed, 135 insertions, 21 deletions

diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index ad6eb9f6fe0..c2346f2f1c3 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -10,7 +10,6 @@
   .page-content-header,
   .commit-box,
   .info-well,
-  .notes,
   .commit-ci-menu,
   .files-changed {
     @extend .fixed-width-container;
@@ -23,16 +22,6 @@
     .merge-manually {
       @extend .fixed-width-container;
     }
-
-    .merge-request-tabs-holder {
-      &.affix {
-        border-bottom: 1px solid $border-color;
-
-        .nav-links {
-          border: 0;
-        }
-      }
-    }
   }
 
   .merge-request-details {
@@ -67,6 +56,10 @@
     padding: 5px;
     max-height: calc(100vh - 100px);
   }
+
+  .emoji-block {
+    padding: 10px 0 4px;
+  }
 }
 
 .issuable-filter-count {
@@ -95,10 +88,15 @@
 }
 
 .right-sidebar {
-  a {
+  a,
+  .btn-link {
     color: inherit;
   }
 
+  .btn-link {
+    outline: none;
+  }
+
   .issuable-header-text {
     margin-top: 7px;
   }
@@ -200,8 +198,17 @@
   right: 0;
   transition: width .3s;
   background: $gray-light;
-  padding: 10px 20px;
-  z-index: 2;
+  padding: 0 20px;
+  z-index: 200;
+  overflow: hidden;
+
+  .issuable-sidebar {
+    width: calc(100% + 100px);
+    height: 100%;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+  }
 
   &.right-sidebar-expanded {
     width: $gutter_width;
@@ -215,6 +222,14 @@
       }
     }
 
+    .issuable-sidebar-header {
+      padding-top: 10px;
+    }
+
+    .assign-yourself .btn-link {
+      padding-left: 0;
+    }
+
     .light {
       font-weight: normal;
     }
@@ -239,6 +254,10 @@
       margin-left: 0;
     }
 
+    .assignee .user-list .avatar {
+      margin: 0;
+    }
+
     .username {
       display: block;
       margin-top: 4px;
@@ -260,11 +279,10 @@
     }
 
     width: $gutter_collapsed_width;
-    padding-top: 0;
+    padding: 0;
 
     .block {
       width: $gutter_collapsed_width - 2px;
-      margin-left: -19px;
       padding: 15px 0 0;
       border-bottom: none;
       overflow: hidden;
@@ -301,6 +319,10 @@
         margin-top: 0;
       }
 
+      .sidebar-avatar-counter {
+        padding-top: 2px;
+      }
+
       .todo-undone {
         color: $gl-link-color;
       }
@@ -309,10 +331,15 @@
         display: none;
       }
 
-      .avatar:hover {
+      .avatar:hover,
+      .avatar-counter:hover {
         border-color: $issuable-sidebar-color;
       }
 
+      .avatar-counter:hover {
+        color: $issuable-sidebar-color;
+      }
+
       .btn-clipboard {
         border: none;
         color: $issuable-sidebar-color;
@@ -322,6 +349,17 @@
           color: $gl-text-color;
         }
       }
+
+      &.multiple-users {
+        display: flex;
+        justify-content: center;
+      }
+    }
+
+    .sidebar-avatar-counter {
+      width: 24px;
+      height: 24px;
+      border-radius: 12px;
     }
 
     .sidebar-collapsed-user {
@@ -332,6 +370,37 @@
     .issuable-header-btn {
       display: none;
     }
+
+    .multiple-users {
+      height: 24px;
+      margin-bottom: 17px;
+      margin-top: 4px;
+      padding-bottom: 4px;
+
+      .btn-link {
+        padding: 0;
+        border: 0;
+
+        .avatar {
+          margin: 0;
+        }
+      }
+
+      .btn-link:first-child {
+        position: absolute;
+        left: 10px;
+        z-index: 1;
+      }
+
+      .btn-link:last-child {
+        position: absolute;
+        right: 10px;
+
+        &:hover {
+          text-decoration: none;
+        }
+      }
+    }
   }
 
   a {
@@ -362,7 +431,7 @@
 }
 
 .detail-page-description {
-  padding: 16px 0 0;
+  padding: 16px 0;
 
   small {
     color: $gray-darkest;
@@ -372,7 +441,7 @@
 .edited-text {
   color: $gray-darkest;
   display: block;
-  margin: 0 0 16px;
+  margin: 16px 0 0;
 
   .author_link {
     color: $gray-darkest;
@@ -383,6 +452,12 @@
   margin: -5px;
 }
 
+
+.user-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+
 .participants-author {
   display: inline-block;
   padding: 5px;
@@ -400,13 +475,39 @@
   }
 }
 
-.participants-more {
+.user-item {
+  display: inline-block;
+  padding: 5px;
+  flex-basis: 20%;
+
+  .user-link {
+    display: inline-block;
+  }
+}
+
+.participants-more,
+.user-list-more {
   margin-top: 5px;
   margin-left: 5px;
 
-  a {
+  a,
+  .btn-link {
     color: $gl-text-color-secondary;
   }
+
+  .btn-link {
+    outline: none;
+    padding: 0;
+  }
+
+  .btn-link:hover {
+    @extend a:hover;
+    text-decoration: none;
+  }
+
+  .btn-link:focus {
+    text-decoration: none;
+  }
 }
 
 .issuable-form-padding-top {
@@ -499,6 +600,19 @@
   }
 }
 
+.issuable-list li,
+.issue-info-container .controls {
+  .avatar-counter {
+    display: inline-block;
+    vertical-align: middle;
+    min-width: 16px;
+    line-height: 14px;
+    height: 16px;
+    padding-left: 2px;
+    padding-right: 2px;
+  }
+}
+
 .time_tracker {
   padding-bottom: 0;
   border-bottom: 0;