Adds backport change for pipeline.scss

Adds the necessary backport changes for pipeline.scss. This commit is
neccessary from the changes made in MR 16135

Revert schema.rb which was automatically added will investigate

app/assets/javascripts/pipelines/components/graph/graph_component.vue

@@ -20,6 +20,9 @@ export default {
         <stage-column-component
           v-for="(stage, index) in graph"
           :key="stage.name"
+          :class="{
+            'append-right-48': shouldAddRightMargin(index),
+          }"
           :title="capitalizeStageName(stage.name)"
           :groups="stage.groups"
           :stage-connector-class="stageConnectorClass(index, stage)"

app/assets/javascripts/pipelines/mixins/graph_component_mixin.js

@@ -40,5 +40,15 @@ export default {
     refreshPipelineGraph() {
       this.$emit('refreshPipelineGraph');
     },
+    /**
+     * CSS class is applied:
+     *  - if pipeline graph contains only one stage column component
+     *
+     * @param {number} index
+     * @returns {boolean}
+     */
+    shouldAddRightMargin(index) {
+      return !(index === this.graph.length - 1);
+    },
   },
 };

app/assets/stylesheets/framework/common.scss

@@ -395,6 +395,7 @@ img.emoji {
 .prepend-left-default { margin-left: $gl-padding; }
 .prepend-left-20 { margin-left: 20px; }
 .prepend-left-32 { margin-left: 32px; }
+.prepend-left-64 { margin-left: 64px; }
 .append-right-4 { margin-right: 4px; }
 .append-right-5 { margin-right: 5px; }
 .append-right-8 { margin-right: 8px; }
@@ -402,6 +403,8 @@ img.emoji {
 .append-right-15 { margin-right: 15px; }
 .append-right-default { margin-right: $gl-padding; }
 .append-right-20 { margin-right: 20px; }
+.append-right-32 { margin-right: 32px; }
+.append-right-48 { margin-right: 48px; }
 .prepend-right-32 { margin-right: 32px; }
 .append-bottom-0 { margin-bottom: 0; }
 .append-bottom-4 { margin-bottom: $gl-padding-4; }

app/assets/stylesheets/pages/pipelines.scss

@@ -476,10 +476,6 @@
     display: inline-block;
     vertical-align: top;
 
-    &:not(:last-child) {
-      margin-right: 44px;
-    }
-
     &.left-margin {
       &:not(:first-child) {
         margin-left: 44px;