Merge branch 'fix-top-calc-for-trigger-page-sidebar' into 'master'

Fix top calculation for trigger job page sidebar

See merge request gitlab-org/gitlab!78158

app/assets/javascripts/jobs/bridge/components/sidebar.vue

@@ -8,7 +8,6 @@ import CommitBlock from '../../components/commit_block.vue';
 
 export default {
   styles: {
-    top: '75px',
     width: '290px',
   },
   name: 'BridgeSidebar',
@@ -37,17 +36,37 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      topPosition: 0,
+    };
+  },
+  computed: {
+    rootStyle() {
+      return { ...this.$options.styles, top: `${this.topPosition}px` };
+    },
+  },
+  mounted() {
+    this.setTopPosition();
+  },
   methods: {
     onSidebarButtonClick() {
       this.$emit('toggleSidebar');
     },
+    setTopPosition() {
+      const navbarEl = document.querySelector('.js-navbar');
+
+      if (navbarEl) {
+        this.topPosition = navbarEl.getBoundingClientRect().bottom;
+      }
+    },
   },
 };
 </script>
 <template>
   <aside
     class="gl-fixed gl-right-0 gl-px-5 gl-bg-gray-10 gl-h-full gl-border-l-solid gl-border-1 gl-border-gray-100 gl-z-index-200 gl-overflow-hidden"
-    :style="this.$options.styles"
+    :style="rootStyle"
   >
     <div class="gl-py-5 gl-display-flex gl-align-items-center">
       <tooltip-on-truncate :title="bridgeJob.name" truncate-target="child"

spec/frontend/jobs/bridge/components/sidebar_spec.js

@@ -7,6 +7,14 @@ import { mockCommit, mockJob } from '../mock_data';
 describe('Bridge Sidebar', () => {
   let wrapper;
 
+  const MockHeaderEl = {
+    getBoundingClientRect() {
+      return {
+        bottom: '40',
+      };
+    },
+  };
+
   const createComponent = ({ featureFlag } = {}) => {
     wrapper = shallowMount(BridgeSidebar, {
       provide: {
@@ -44,6 +52,17 @@ describe('Bridge Sidebar', () => {
     });
   });
 
+  describe('styles', () => {
+    beforeEach(async () => {
+      jest.spyOn(document, 'querySelector').mockReturnValue(MockHeaderEl);
+      createComponent();
+    });
+
+    it('calculates root styles correctly', () => {
+      expect(wrapper.attributes('style')).toBe('width: 290px; top: 40px;');
+    });
+  });
+
   describe('sidebar expansion', () => {
     beforeEach(() => {
       createComponent();