6 files changed, 30 insertions, 20 deletions
diff --git a/app/assets/stylesheets/framework/ci_variable_list.scss b/app/assets/stylesheets/framework/ci_variable_list.scss
index d9b0e4558ad..28d7492b99c 100644
--- a/app/assets/stylesheets/framework/ci_variable_list.scss
+++ b/app/assets/stylesheets/framework/ci_variable_list.scss
@@ -47,6 +47,7 @@
   display: flex;
   align-items: flex-start;
   width: 100%;
+  padding-bottom: $gl-padding;
 
   @include media-breakpoint-down(xs) {
     display: block;
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index dffd5e70edb..2b499e50ea3 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -48,6 +48,10 @@
   color: $brand-info;
 }
 
+.bg-gray-light {
+  background-color: $gray-light;
+}
+
 .text-break-word {
   word-break: break-all;
 }
@@ -446,19 +450,13 @@ img.emoji {
 }
 
 /** COMMON SPACING CLASSES **/
-.gl-pl-0 { padding-left: 0; }
-.gl-pl-1 { padding-left: #{0.5 * $grid-size}; }
-.gl-pl-2 { padding-left: $grid-size; }
-.gl-pl-3 { padding-left: #{2 * $grid-size}; }
-.gl-pl-4 { padding-left: #{3 * $grid-size}; }
-.gl-pl-5 { padding-left: #{4 * $grid-size}; }
-
-.gl-pr-0 { padding-right: 0; }
-.gl-pr-1 { padding-right: #{0.5 * $grid-size}; }
-.gl-pr-2 { padding-right: $grid-size; }
-.gl-pr-3 { padding-right: #{2 * $grid-size}; }
-.gl-pr-4 { padding-right: #{3 * $grid-size}; }
-.gl-pr-5 { padding-right: #{4 * $grid-size}; }
+@each $index, $padding in $spacing-scale {
+  #{'.gl-p-#{$index}'} { padding: $padding; }
+  #{'.gl-pl-#{$index}'} { padding-left: $padding; }
+  #{'.gl-pr-#{$index}'} { padding-right: $padding; }
+  #{'.gl-pt-#{$index}'} { padding-top: $padding; }
+  #{'.gl-pb-#{$index}'} { padding-bottom: $padding; }
+}
 
 /**
  * Removes browser specific clear icon from input fields in
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index f2b433f7c42..1bc597bd4ae 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -597,10 +597,15 @@
 
   .emoji-menu-toggle-button {
     @include emoji-menu-toggle-button;
+    padding: $gl-vert-padding $gl-btn-padding;
   }
 
   .input-group {
-    height: 34px;
+    &,
+    .input-group-prepend,
+    .input-group-append {
+      height: $input-height;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss
index 323a3dbecd5..e2bb1eb67c0 100644
--- a/app/assets/stylesheets/framework/modal.scss
+++ b/app/assets/stylesheets/framework/modal.scss
@@ -66,12 +66,6 @@
       margin-top: $grid-size;
     }
   }
-
-  @include media-breakpoint-up(sm) {
-    .btn:nth-child(1) {
-      margin-left: auto;
-    }
-  }
 }
 
 body.modal-open {
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 244b414d334..7c152efd9c7 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -473,3 +473,7 @@ textarea {
 /* stylelint-enable */
 
 .lh-100 { line-height: 1; }
+
+wbr {
+  display: inline-block;
+}
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index da1f196afdb..4a034e1e547 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -11,6 +11,14 @@ $default-transition-duration: 0.15s;
 $contextual-sidebar-width: 220px;
 $contextual-sidebar-collapsed-width: 50px;
 $toggle-sidebar-height: 48px;
+$spacing-scale: (
+  0: 0,
+  1: #{0.5 * $grid-size},
+  2: $grid-size,
+  3: #{2 * $grid-size},
+  4: #{3 * $grid-size},
+  5: #{4 * $grid-size}
+);
 
 /*
  * Color schema