16 files changed, 292 insertions, 169 deletions

diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index b2416a3d5bc..750d2c8b990 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -80,6 +80,7 @@
   overflow-x: scroll;
   white-space: nowrap;
   min-height: 200px;
+  display: flex;
 
   @include media-breakpoint-only(sm) {
     height: calc(100vh - #{$issue-board-list-difference-sm});
@@ -110,17 +111,15 @@
 
 .board {
   display: inline-block;
-  width: calc(85vw - 15px);
+  flex: 1;
+  min-width: 300px;
+  max-width: 400px;
   height: 100%;
   padding-right: ($gl-padding / 2);
   padding-left: ($gl-padding / 2);
   white-space: normal;
   vertical-align: top;
 
-  @include media-breakpoint-up(sm) {
-    width: 400px;
-  }
-
   &.is-expandable {
     .board-header {
       cursor: pointer;
@@ -128,6 +127,8 @@
   }
 
   &.is-collapsed {
+    flex: none;
+    min-width: 0;
     width: 50px;
 
     .board-header {
@@ -289,10 +290,6 @@
   &.is-active,
   &.is-active .board-card-assignee:hover a {
     background-color: $row-hover;
-
-    &:first-child:not(:only-child) {
-      box-shadow: -10px 0 10px 1px $row-hover;
-    }
   }
 
   .badge {
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index a4ca82de90e..49226ae8eac 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -135,10 +135,10 @@
 }
 
 .text-expander {
-  display: inline-block;
+  display: inline-flex;
   background: $white-light;
   color: $gl-text-color-secondary;
-  padding: 0 4px;
+  padding: 1px $gl-padding-4;
   cursor: pointer;
   border: 1px solid $border-gray-dark;
   border-radius: $border-radius-default;
@@ -180,6 +180,11 @@
 .commit-content {
   padding-right: 10px;
   white-space: normal;
+
+  .commit-title {
+    display: flex;
+    align-items: center;
+  }
 }
 
 .commit-actions {
@@ -193,6 +198,10 @@
     display: inline-flex;
   }
 
+  .ci-status-icon svg {
+    vertical-align: text-bottom;
+  }
+
   > .ci-status-link,
   > .btn,
   > .commit-sha-group {
@@ -249,7 +258,6 @@
 .generic_commit_status {
   a,
   button {
-    color: $gl-text-color;
     vertical-align: baseline;
   }
 
diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss
index 7b36bcb3c7d..2e007c52592 100644
--- a/app/assets/stylesheets/pages/detail_page.scss
+++ b/app/assets/stylesheets/pages/detail_page.scss
@@ -23,7 +23,8 @@
   position: relative;
   line-height: 35px;
   display: flex;
-  flex-grow: 1;
+  flex: 1 1;
+  min-width: 0;
 
   @include media-breakpoint-up(sm) {
     padding-left: 0;
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index f06c9dcdf8c..8e8a879be88 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -24,6 +24,10 @@
     color: $gl-text-color;
     border-radius: 0 0 3px 3px;
 
+    .code {
+      padding: 0;
+    }
+
     .unfold {
       cursor: pointer;
     }
@@ -61,6 +65,7 @@
 
       .diff-line-num {
         width: 50px;
+        position: relative;
 
         a {
           transition: none;
@@ -77,6 +82,12 @@
 
         span {
           white-space: pre-wrap;
+
+          &.context-cell {
+            display: inline-block;
+            width: 100%;
+            height: 100%;
+          }
         }
 
         .line {
@@ -189,8 +200,22 @@
 
       img {
         border: 1px solid $white-light;
-        background-image: linear-gradient(45deg, $border-color 25%, transparent 25%, transparent 75%, $border-color 75%, $border-color 100%),
-        linear-gradient(45deg, $border-color 25%, transparent 25%, transparent 75%, $border-color 75%, $border-color 100%);
+        background-image: linear-gradient(
+            45deg,
+            $border-color 25%,
+            transparent 25%,
+            transparent 75%,
+            $border-color 75%,
+            $border-color 100%
+          ),
+          linear-gradient(
+            45deg,
+            $border-color 25%,
+            transparent 25%,
+            transparent 75%,
+            $border-color 75%,
+            $border-color 100%
+          );
         background-size: 10px 10px;
         background-position: 0 0, 5px 5px;
         max-width: 100%;
@@ -395,6 +420,69 @@
   .line_content {
     white-space: pre-wrap;
   }
+
+  .diff-file-container {
+    .frame.deleted {
+      border: 0;
+      background-color: inherit;
+
+      .image_file img {
+        border: 1px solid $deleted;
+      }
+    }
+
+    .frame.added {
+      border: 0;
+      background-color: inherit;
+
+      .image_file img {
+        border: 1px solid $added;
+      }
+    }
+
+    .swipe.view,
+    .onion-skin.view {
+      .swipe-wrap {
+        top: 0;
+        right: 0;
+      }
+
+      .frame.deleted {
+        top: 0;
+        right: 0;
+      }
+
+      .swipe-bar {
+        top: 0;
+
+        .top-handle {
+          top: -14px;
+          left: -7px;
+        }
+
+        .bottom-handle {
+          bottom: -14px;
+          left: -7px;
+        }
+      }
+
+      .file-container {
+        display: inline-block;
+
+        .file-content {
+          padding: 0;
+
+          img {
+            max-width: none;
+          }
+        }
+      }
+    }
+
+    .onion-skin.view .controls {
+      bottom: -25px;
+    }
+  }
 }
 
 .file-content .diff-file {
@@ -536,7 +624,7 @@
   margin-right: 0;
   border-color: $white-light;
   cursor: pointer;
-  transition: all .1s ease-out;
+  transition: all 0.1s ease-out;
 
   @for $i from 1 through 4 {
     &:nth-child(#{$i}) {
@@ -563,7 +651,7 @@
   height: 24px;
   border-radius: 50%;
   padding: 0;
-  transition: transform .1s ease-out;
+  transition: transform 0.1s ease-out;
   z-index: 100;
 
   .collapse-icon {
@@ -600,21 +688,21 @@
   }
 
   @include media-breakpoint-up(sm) {
-    position: -webkit-sticky;
-    position: sticky;
     top: 24px;
     background-color: $white-light;
-    z-index: 190;
 
     &.diff-files-changed-merge-request {
-      top: 76px;
+      position: sticky;
+      top: 90px;
+      z-index: 190;
+      margin: $gl-padding 0;
+      padding: 0;
     }
 
     &.is-stuck {
       padding-top: 0;
       padding-bottom: 0;
       border-bottom: 1px solid $white-dark;
-      transform: translateY(16px);
 
       .diff-stats-additions-deletions-expanded,
       .inline-parallel-buttons {
@@ -708,11 +796,35 @@
     width: 100%;
     height: 10px;
     background-color: $white-light;
-    background-image: linear-gradient(45deg, transparent, transparent 73%, $diff-jagged-border-gradient-color 75%, $white-light 80%),
-      linear-gradient(225deg, transparent, transparent 73%, $diff-jagged-border-gradient-color 75%, $white-light 80%),
-      linear-gradient(135deg, transparent, transparent 73%, $diff-jagged-border-gradient-color 75%, $white-light 80%),
-      linear-gradient(-45deg, transparent, transparent 73%, $diff-jagged-border-gradient-color 75%, $white-light 80%);
-    background-position: 5px 5px,0 5px,0 5px,5px 5px;
+    background-image: linear-gradient(
+        45deg,
+        transparent,
+        transparent 73%,
+        $diff-jagged-border-gradient-color 75%,
+        $white-light 80%
+      ),
+      linear-gradient(
+        225deg,
+        transparent,
+        transparent 73%,
+        $diff-jagged-border-gradient-color 75%,
+        $white-light 80%
+      ),
+      linear-gradient(
+        135deg,
+        transparent,
+        transparent 73%,
+        $diff-jagged-border-gradient-color 75%,
+        $white-light 80%
+      ),
+      linear-gradient(
+        -45deg,
+        transparent,
+        transparent 73%,
+        $diff-jagged-border-gradient-color 75%,
+        $white-light 80%
+      );
+    background-position: 5px 5px, 0 5px, 0 5px, 5px 5px;
     background-size: 10px 10px;
     background-repeat: repeat;
   }
@@ -750,11 +862,16 @@
 .frame.click-to-comment {
   position: relative;
   cursor: image-url('illustrations/image_comment_light_cursor.svg')
-    $image-comment-cursor-left-offset $image-comment-cursor-top-offset, auto;
+      $image-comment-cursor-left-offset $image-comment-cursor-top-offset,
+    auto;
 
   // Retina cursor
-  cursor: -webkit-image-set(image-url('illustrations/image_comment_light_cursor.svg') 1x, image-url('illustrations/image_comment_light_cursor@2x.svg') 2x)
-    $image-comment-cursor-left-offset $image-comment-cursor-top-offset, auto;
+  cursor: -webkit-image-set(
+        image-url('illustrations/image_comment_light_cursor.svg') 1x,
+        image-url('illustrations/image_comment_light_cursor@2x.svg') 2x
+      )
+      $image-comment-cursor-left-offset $image-comment-cursor-top-offset,
+    auto;
 
   .comment-indicator {
     position: absolute;
@@ -840,7 +957,7 @@
 
     .diff-notes-collapse,
     .note,
-    .discussion-reply-holder, {
+    .discussion-reply-holder {
       display: none;
     }
 
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index c2b42e02eee..05bf5596fb3 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -425,7 +425,7 @@
       margin-left: 5px;
 
       > .btn {
-        margin-right: $btn-xs-side-margin;
+        margin-right: $btn-margin-5;
       }
     }
   }
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index b42c232fd91..f9fd9f1ab8b 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -698,6 +698,8 @@
   font-size: 14px;
   line-height: 24px;
   align-self: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .js-issuable-selector-wrap {
diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index 6882b4adb15..79cac7f4ff0 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -220,7 +220,7 @@
 
 .label-link {
   display: inline-flex;
-  vertical-align: top;
+  vertical-align: text-bottom;
 
   &:hover .color-label {
     text-decoration: underline;
@@ -280,7 +280,7 @@
     width: 150px;
     flex-shrink: 0;
 
-    .label {
+    .badge {
       overflow: hidden;
       text-overflow: ellipsis;
       max-width: 100%;
diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss
index 9914555d309..5fdb2b4a90a 100644
--- a/app/assets/stylesheets/pages/members.scss
+++ b/app/assets/stylesheets/pages/members.scss
@@ -121,10 +121,6 @@
   background: transparent;
   border: 0;
   outline: 0;
-
-  @include media-breakpoint-up(sm) {
-    right: 160px;
-  }
 }
 
 .flex-project-members-panel {
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 9eceb3e9a33..d96ba2107d1 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -46,17 +46,12 @@
 
   .btn {
     font-size: $gl-font-size;
+    max-height: 26px;
 
     &[disabled] {
       opacity: 0.3;
     }
 
-    &.btn-xs {
-      line-height: 1;
-      padding: 5px 10px;
-      margin-top: 1px;
-    }
-
     &.dropdown-toggle {
       .fa {
         color: inherit;
@@ -605,14 +600,12 @@
   position: relative;
   background: $gray-light;
   color: $gl-text-color;
-  z-index: 199;
 
   .mr-version-menus-container {
-    display: -webkit-flex;
     display: flex;
-    -webkit-align-items: center;
     align-items: center;
     padding: 16px;
+    z-index: 199;
   }
 
   .content-block {
@@ -678,6 +671,7 @@
 
 .merge-request-tabs {
   display: flex;
+  flex-wrap: nowrap;
   margin-bottom: 0;
   padding: 0;
 }
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 3b037d066dc..5e5696b1602 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -129,7 +129,7 @@
     .icon svg {
       position: relative;
       top: 2px;
-      margin-right: $btn-xs-side-margin;
+      margin-right: $btn-margin-5;
       width: $gl-font-size;
       height: $gl-font-size;
       fill: $orange-600;
@@ -247,22 +247,6 @@
 }
 
 .discussion-with-resolve-btn {
-  display: table;
-  width: 100%;
-  border-collapse: separate;
-  table-layout: auto;
-
-  .btn-group {
-    display: table-cell;
-    float: none;
-    width: 1%;
-
-    &:first-child {
-      width: 100%;
-      padding-right: 5px;
-    }
-  }
-
   .discussion-actions {
     display: table;
 
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 299eda53140..25400d886fb 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -3,9 +3,17 @@
  */
 
 @-webkit-keyframes targe3-note {
-  from { background: $note-targe3-outside; }
-  50% { background: $note-targe3-inside; }
-  to { background: $note-targe3-outside; }
+  from {
+    background: $note-targe3-outside;
+  }
+
+  50% {
+    background: $note-targe3-inside;
+  }
+
+  to {
+    background: $note-targe3-outside;
+  }
 }
 
 ul.notes {
@@ -33,10 +41,12 @@ ul.notes {
 
     .diff-content {
       overflow: visible;
+      padding: 0;
     }
   }
 
-  > li { // .timeline-entry
+  > li {
+    // .timeline-entry
     padding: 0;
     display: block;
     position: relative;
@@ -153,7 +163,6 @@ ul.notes {
     }
 
     .note-header {
-
       @include notes-media('max', map-get($grid-breakpoints, xs)) {
         .inline {
           display: block;
@@ -245,7 +254,6 @@ ul.notes {
 
       .system-note-commit-list-toggler {
         color: $gl-link-color;
-        display: none;
         padding: 10px 0 0;
         cursor: pointer;
         position: relative;
@@ -624,20 +632,18 @@ ul.notes {
 .line_holder .is-over:not(.no-comment-btn) {
   .add-diff-note {
     opacity: 1;
+    z-index: 101;
   }
 }
 
 .add-diff-note {
   @include btn-comment-icon;
   opacity: 0;
-  margin-top: -2px;
   margin-left: -55px;
   position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
   z-index: 10;
-
-  .new & {
-    margin-top: -10px;
-  }
 }
 
 .discussion-body,
@@ -665,7 +671,6 @@ ul.notes {
     background-color: $white-light;
   }
 
-
   a {
     color: $gl-link-color;
   }
@@ -771,3 +776,44 @@ ul.notes {
     height: auto;
   }
 }
+
+// Vue refactored diff discussion adjustments
+.files {
+  .diff-discussions {
+    .note-discussion.timeline-entry {
+      padding-left: 0;
+
+      &:last-child {
+        border-bottom: 0;
+      }
+
+      > .timeline-entry-inner {
+        padding: 0;
+
+        > .timeline-content {
+          margin-left: 0;
+        }
+
+        > .timeline-icon {
+          display: none;
+        }
+      }
+
+      .discussion-body {
+        padding-top: 0;
+
+        .discussion-wrapper {
+          border-color: transparent;
+        }
+      }
+    }
+  }
+
+  .diff-comment-form {
+    display: block;
+  }
+
+  .add-diff-note svg {
+    margin-top: 4px;
+  }
+}
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 30428fd198d..52332ac97dd 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -36,6 +36,7 @@
   }
 
   .table-holder {
+    overflow: unset;
     width: 100%;
   }
 
@@ -1000,7 +1001,7 @@ button.mini-pipeline-graph-dropdown-toggle {
   /**
    * Center dropdown menu in mini graph
    */
-  &.dropdown-menu {
+  .dropdown &.dropdown-menu {
     transform: translate(-80%, 0);
 
     @media (min-width: map-get($grid-breakpoints, md)) {
diff --git a/app/assets/stylesheets/pages/profiles/preferences.scss b/app/assets/stylesheets/pages/profiles/preferences.scss
index babe81cb0f7..a353f301d07 100644
--- a/app/assets/stylesheets/pages/profiles/preferences.scss
+++ b/app/assets/stylesheets/pages/profiles/preferences.scss
@@ -16,7 +16,7 @@
 
 .application-theme {
   label {
-    margin: 0 $gl-padding $gl-padding 0;
+    margin: 0 $gl-padding-32 $gl-padding 0;
     text-align: center;
   }
 
@@ -24,7 +24,7 @@
     font-size: 0;
     height: 48px;
     border-radius: 4px;
-    min-width: 135px;
+    min-width: 112px;
     margin-bottom: $gl-padding-8;
 
     &.ui-indigo {
@@ -75,7 +75,8 @@
 
 .syntax-theme {
   label {
-    margin-right: 20px;
+    margin-right: $gl-padding-32;
+    margin-bottom: $gl-padding;
     text-align: center;
 
     .preview {
@@ -84,7 +85,6 @@
 
       img {
         border-radius: 4px;
-
         max-width: 100%;
       }
     }
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 22964163e95..aa83e5bdebc 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -354,12 +354,6 @@
   min-width: 200px;
 }
 
-.deploy-keys {
-  .scrolling-tabs-container {
-    position: relative;
-  }
-}
-
 .deploy-key {
   // Ensure that the fingerprint does not overflow on small screens
   .fingerprint {
@@ -503,6 +497,12 @@
     &:not(:first-child) {
       border-top: 1px solid $border-color;
     }
+
+    .btn-template-icon {
+      position: absolute;
+      left: $gl-padding;
+      top: $gl-padding;
+    }
   }
 
   .template-title {
@@ -520,12 +520,6 @@
     }
   }
 
-  svg {
-    position: absolute;
-    left: $gl-padding;
-    top: $gl-padding;
-  }
-
   .project-fields-form {
     display: none;
 
@@ -536,34 +530,23 @@
   }
 
   .template-input-group {
-    position: relative;
-
-    @include media-breakpoint-up(sm) {
-      display: flex;
-    }
-
-    .input-group-prepend,
-    .input-group-append {
+    .input-group-prepend {
       flex: 1;
-      text-align: left;
-      padding-left: ($gl-padding * 3);
-      background-color: $white-light;
     }
 
-    .selected-template {
-      line-height: 20px;
+    .input-group-text {
+      width: 100%;
+      background-color: $white-light;
     }
 
     .selected-icon {
+      padding-right: $gl-padding;
+
       svg {
         display: none;
         top: 7px;
         height: 20px;
         width: 20px;
-
-        &.active {
-          display: block;
-        }
       }
     }
   }
@@ -875,7 +858,6 @@ pre.light-well {
 
 .git-clone-holder {
   width: 380px;
-  height: 28px;
 
   .btn-clipboard {
     border: 1px solid $border-color;
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 6e7fc50c63d..3c24aaa65e8 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -23,6 +23,7 @@
   margin-top: 0;
   border-top: 1px solid $white-dark;
   padding-bottom: $ide-statusbar-height;
+  color: $gl-text-color;
 
   &.is-collapsed {
     .ide-file-list {
@@ -45,12 +46,8 @@
   .file {
     cursor: pointer;
 
-    &.file-open {
-      background: $white-normal;
-    }
-
     &.file-active {
-      font-weight: $gl-font-weight-bold;
+      background: $theme-gray-100;
     }
 
     .ide-file-name {
@@ -58,7 +55,9 @@
       white-space: nowrap;
       text-overflow: ellipsis;
       max-width: inherit;
-      line-height: 22px;
+      line-height: 16px;
+      display: inline-block;
+      height: 18px;
 
       svg {
         vertical-align: middle;
@@ -86,12 +85,14 @@
 
     .ide-new-btn {
       display: none;
+
+      .btn {
+        padding: 2px 5px;
+      }
     }
 
     &:hover,
     &:focus {
-      background: $white-normal;
-
       .ide-new-btn {
         display: block;
       }
@@ -281,8 +282,8 @@
     }
 
     .margin {
-      background-color: $gray-light;
-      border-right: 1px solid $white-normal;
+      background-color: $white-light;
+      border-right: 1px solid $theme-gray-100;
 
       .line-insert {
         border-right: 1px solid $line-added-dark;
@@ -303,6 +304,15 @@
 .multi-file-editor-holder {
   height: 100%;
   min-height: 0;
+
+  &.is-readonly,
+  .editor.original {
+    .monaco-editor,
+    .monaco-editor-background,
+    .monaco-editor .inputarea.ime-input {
+      background-color: $theme-gray-50;
+    }
+  }
 }
 
 .preview-container {
@@ -335,7 +345,6 @@
 
       img {
         max-width: 90%;
-        max-height: 90%;
       }
 
       .isZoomable {
@@ -541,32 +550,12 @@
   margin-right: -$grid-size;
   min-height: 60px;
 
-  .multi-file-commit-list-item {
-    margin-left: 0;
-    margin-right: 0;
-  }
-
   &.form-text.text-muted {
     margin-left: 0;
     right: 0;
   }
 }
 
-.multi-file-commit-list-item {
-  .multi-file-discard-btn {
-    display: none;
-    margin-top: -2px;
-    margin-left: auto;
-    color: $gl-link-color;
-  }
-
-  &:hover {
-    .multi-file-discard-btn {
-      display: flex;
-    }
-  }
-}
-
 .multi-file-addition,
 .multi-file-addition-solid {
   color: $green-500;
@@ -596,7 +585,7 @@
   }
 }
 
-.multi-file-commit-list-item,
+.multi-file-commit-list-path,
 .ide-file-list .file {
   display: flex;
   align-items: center;
@@ -608,16 +597,20 @@
 
   &:hover,
   &:focus {
-    background: $white-normal;
+    background: $theme-gray-100;
+  }
+
+  &:active {
+    background: $theme-gray-200;
   }
 }
 
 .multi-file-commit-list-path {
-  padding: 0;
-  background: none;
-  border: 0;
-  text-align: left;
-  width: 100%;
+  cursor: pointer;
+
+  &.is-active {
+    background-color: $white-normal;
+  }
 
   &:hover,
   &:focus {
@@ -632,17 +625,23 @@
 }
 
 .multi-file-commit-list-file-path {
-  @include str-truncated(100%);
-
-  &:hover {
-    text-decoration: underline;
-  }
+  @include str-truncated(calc(100% - 30px));
 
   &:active {
     text-decoration: none;
   }
 }
 
+.multi-file-discard-btn {
+  top: 4px;
+  right: 8px;
+  bottom: 4px;
+
+  svg {
+    top: 0;
+  }
+}
+
 .multi-file-commit-form {
   position: relative;
   background-color: $white-light;
@@ -837,18 +836,20 @@
 }
 
 .ide-staged-action-btn {
-  margin-left: auto;
-  line-height: 22px;
+  width: 22px;
+  margin-left: -1px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+
+  > svg {
+    top: 0;
+  }
 }
 
 .ide-commit-file-count {
   min-width: 22px;
-  margin-left: auto;
   background-color: $gray-light;
-  border-radius: $border-radius-default;
   border: 1px solid $white-dark;
-  line-height: 20px;
-  text-align: center;
 }
 
 .ide-commit-radios {
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index 1f8e61257a9..2f28031b9c8 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -52,7 +52,7 @@
 
 .settings-content {
   max-height: 1px;
-  overflow-y: scroll;
+  overflow-y: hidden;
   padding-right: 110px;
   animation: collapseMaxHeight 300ms ease-out;
   // Keep the section from expanding when we scroll over it
@@ -127,13 +127,6 @@
   color: $gl-danger;
 }
 
-.service-settings {
-  input[type="radio"],
-  input[type="checkbox"] {
-    margin-top: 10px;
-  }
-}
-
 .integration-settings-form {
   .card.card-body,
   .info-well {
@@ -296,7 +289,8 @@
   }
 
   .btn-clipboard {
-    margin-left: 5px;
+    background-color: $white-light;
+    border: 1px solid $theme-gray-200;
   }
 
   .deploy-token-help-block {