Adds backport change for pipeline.scssfix-style-lint-errors-pipeline-ce

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

2 files changed, 13 insertions, 0 deletions

diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
index ba0dea626dc..27c1b639889 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue
+++ b/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)"
diff --git a/app/assets/javascripts/pipelines/mixins/graph_component_mixin.js b/app/assets/javascripts/pipelines/mixins/graph_component_mixin.js
index 66e9476dadf..f383a4b3368 100644
--- a/app/assets/javascripts/pipelines/mixins/graph_component_mixin.js
+++ b/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);
+    },
   },
 };