1 files changed, 16 insertions, 5 deletions
diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
index cd403757fe6..93156d5d05b 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
@@ -1,9 +1,9 @@
 <script>
 import LinkedGraphWrapper from '../graph_shared/linked_graph_wrapper.vue';
 import LinksLayer from '../graph_shared/links_layer.vue';
+import { DOWNSTREAM, MAIN, UPSTREAM, ONE_COL_WIDTH } from './constants';
 import LinkedPipelinesColumn from './linked_pipelines_column.vue';
 import StageColumnComponent from './stage_column_component.vue';
-import { DOWNSTREAM, MAIN, UPSTREAM } from './constants';
 import { reportToSentry } from './utils';
 
 export default {
@@ -86,11 +86,11 @@ export default {
     reportToSentry(this.$options.name, `error: ${err}, info: ${info}`);
   },
   mounted() {
-    this.measurements = this.getMeasurements();
+    this.getMeasurements();
   },
   methods: {
     getMeasurements() {
-      return {
+      this.measurements = {
         width: this.$refs[this.containerId].scrollWidth,
         height: this.$refs[this.containerId].scrollHeight,
       };
@@ -101,6 +101,13 @@ export default {
     setJob(jobName) {
       this.hoveredJobName = jobName;
     },
+    slidePipelineContainer() {
+      this.$refs.mainPipelineContainer.scrollBy({
+        left: ONE_COL_WIDTH,
+        top: 0,
+        behavior: 'smooth',
+      });
+    },
     togglePipelineExpanded(jobName, expanded) {
       this.pipelineExpanded = {
         expanded,
@@ -116,8 +123,9 @@ export default {
 <template>
   <div class="js-pipeline-graph">
     <div
-      class="gl-display-flex gl-position-relative gl-overflow-auto gl-bg-gray-10 gl-white-space-nowrap"
-      :class="{ 'gl-pipeline-min-h gl-py-5': !isLinkedPipeline }"
+      ref="mainPipelineContainer"
+      class="gl-display-flex gl-position-relative gl-bg-gray-10 gl-white-space-nowrap"
+      :class="{ 'gl-pipeline-min-h gl-py-5 gl-overflow-auto': !isLinkedPipeline }"
     >
       <linked-graph-wrapper>
         <template #upstream>
@@ -153,6 +161,7 @@ export default {
                 :pipeline-id="pipeline.id"
                 @refreshPipelineGraph="$emit('refreshPipelineGraph')"
                 @jobHover="setJob"
+                @updateMeasurements="getMeasurements"
               />
             </links-layer>
           </div>
@@ -160,11 +169,13 @@ export default {
         <template #downstream>
           <linked-pipelines-column
             v-if="showDownstreamPipelines"
+            class="gl-mr-6"
             :linked-pipelines="downstreamPipelines"
             :column-title="__('Downstream')"
             :type="$options.pipelineTypeConstants.DOWNSTREAM"
             @downstreamHovered="setJob"
             @pipelineExpandToggle="togglePipelineExpanded"
+            @scrollContainer="slidePipelineContainer"
             @error="onError"
           />
         </template>