Change container selector for padding calculation

Use js-pipeline-container for alignment to container
Remove css side padding from pipeline tab content
Accounting for right padding no longer needed

2 files changed, 3 insertions, 6 deletions

diff --git a/app/assets/javascripts/pipelines/components/graph/graph_component.vue b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
index 39a33f7fa97..911fb5cab7a 100644
--- a/app/assets/javascripts/pipelines/components/graph/graph_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/graph_component.vue
@@ -42,14 +42,11 @@ export default {
   },
   methods: {
     setGraphPadding() {
-      const container = document.querySelector('.content .container-limited');
+      const container = document.querySelector('.js-pipeline-container');
       if (!container) return;
 
-      const containerRightPadding = 16;
-
       this.graphLeftPadding = container.offsetLeft;
-      this.graphRightPadding =
-        window.innerWidth - container.offsetLeft - container.offsetWidth + containerRightPadding;
+      this.graphRightPadding = window.innerWidth - container.offsetLeft - container.offsetWidth;
     },
     handleLayoutChange() {
       // wait until animations finish, then recalculate padding
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index d4bd5b1b7dc..9709d678807 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -449,7 +449,7 @@
   display: flex;
   width: 100%;
   background-color: $gray-light;
-  padding: $gl-padding;
+  padding: $gl-padding 0;
   overflow: auto;
 }