Update variable rows to be full width with extra button

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

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;

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 {
+    @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;

app/views/projects/pipeline_schedules/_variable_row.html.haml

@@ -2,6 +2,7 @@
 - key = local_assigns.fetch(:key, "")
 - value = local_assigns.fetch(:value, "")
 %li.js-row.pipeline-variable-row{ data: { is_persisted: "#{!id.nil?}" } }
+  .pipeline-variable-row-body
     %input{ type: "hidden", name: "schedule[variables_attributes][][id]", value: id }
     %input.js-destroy-input{ type: "hidden", name: "schedule[variables_attributes][][_destroy]" }
     %input.js-user-input.pipeline-variable-key-input.form-control{ type: "text",