1 files changed, 25 insertions, 17 deletions

diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
index 27c1b639889..cfc72327ef7 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
@@ -2,35 +2,43 @@
 import { GlLoadingIcon } from '@gitlab/ui';
 import StageColumnComponent from './stage_column_component.vue';
 import GraphMixin from '../../mixins/graph_component_mixin';
+import GraphWidthMixin from '~/pipelines/mixins/graph_width_mixin';
 
 export default {
   components: {
     StageColumnComponent,
     GlLoadingIcon,
   },
-  mixins: [GraphMixin],
+  mixins: [GraphMixin, GraphWidthMixin],
 };
 </script>
 <template>
   <div class="build-content middle-block js-pipeline-graph">
     <div class="pipeline-visualization pipeline-graph pipeline-tab-content">
-      <div v-if="isLoading" class="m-auto"><gl-loading-icon :size="3" /></div>
+      <div
+        :style="{
+          paddingLeft: `${graphLeftPadding}px`,
+          paddingRight: `${graphRightPadding}px`,
+        }"
+      >
+        <gl-loading-icon v-if="isLoading" class="m-auto" :size="3" />
 
-      <ul v-if="!isLoading" class="stage-column-list">
-        <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)"
-          :is-first-column="isFirstColumn(index)"
-          :action="stage.status.action"
-          @refreshPipelineGraph="refreshPipelineGraph"
-        />
-      </ul>
+        <ul v-if="!isLoading" class="stage-column-list">
+          <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)"
+            :is-first-column="isFirstColumn(index)"
+            :action="stage.status.action"
+            @refreshPipelineGraph="refreshPipelineGraph"
+          />
+        </ul>
+      </div>
     </div>
   </div>
 </template>