Update variable rows to be full width with extra button

See https://gitlab.slack.com/archives/C5XGWBRJA/p1499355359953774

1 files changed, 30 insertions, 11 deletions

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;