2 files changed, 32 insertions, 11 deletions

diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index a1a09b20548..cf6593fac58 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -153,6 +153,7 @@ $code_line_height: 1.6;
  * Padding
  */
 $gl-padding: 16px;
+$gl-col-padding: 15px;
 $gl-btn-padding: 10px;
 $gl-input-padding: 10px;
 $gl-vert-padding: 6px;
@@ -443,6 +444,7 @@ $logs-p-color: #333;
 /*
 * Forms
 */
+$input-height: 34px;
 $input-danger-bg: #f2dede;
 $input-danger-border: $red-400;
 $input-group-addon-bg: #f7f8fa;
diff --git a/app/assets/stylesheets/pages/pipeline_schedules.scss b/app/assets/stylesheets/pages/pipeline_schedules.scss
index b3743a7c88d..dc719a6ba94 100644
--- a/app/assets/stylesheets/pages/pipeline_schedules.scss
+++ b/app/assets/stylesheets/pages/pipeline_schedules.scss
@@ -79,42 +79,60 @@
   margin-left: 0;
   margin-bottom: 0;
   padding-left: 0;
+  list-style: none;
+  clear: both;
 }
 
 .pipeline-variable-row {
   display: flex;
+  align-items: flex-end;
 
   &:not(:last-child) {
     margin-bottom: $gl-btn-padding;
   }
 
-  @media (max-width: $screen-xs-max) {
-    flex-wrap: wrap;
+  @media (max-width: $screen-sm-max) {
+    padding-right: $gl-col-padding;
   }
 
   &:last-child {
-    & > .pipeline-variable-row-remove-button {
+    & .pipeline-variable-row-remove-button {
       display: none;
     }
 
-    & > .pipeline-variable-value-input {
-      margin-right: $pipeline-variable-remove-button-width;
+    @media (max-width: $screen-sm-max) {
+      & .pipeline-variable-value-input {
+        margin-right: $pipeline-variable-remove-button-width;
+      }
+    }
+
+    @media (max-width: $screen-xs-max) {
+      .pipeline-variable-row-body {
+        margin-right: $pipeline-variable-remove-button-width;
+      }
     }
   }
 }
 
-.pipeline-variable-key-input {
-  margin-right: $gl-btn-padding;
+.pipeline-variable-row-body {
+  display: flex;
+  width: calc(75% - #{$gl-col-padding});
+  padding-left: $gl-col-padding;
+
+  @media (max-width: $screen-sm-max) {
+    width: 100%;
+  }
 
   @media (max-width: $screen-xs-max) {
-    margin-right: $pipeline-variable-remove-button-width;
-    margin-bottom: $gl-btn-padding;
+    display: block;
   }
 }
 
-.pipeline-variable-value-input {
+.pipeline-variable-key-input {
+  margin-right: $gl-btn-padding;
+
   @media (max-width: $screen-xs-max) {
-    flex: 1;
+    margin-bottom: $gl-btn-padding;
   }
 }
 
@@ -124,6 +142,7 @@
   justify-content: center;
   align-items: center;
   width: $pipeline-variable-remove-button-width;
+  height: $input-height;
   padding: 0;
   background: transparent;
   border: 0;