Fix step header and stage tree not sticking pre header redesign (#832)

Author: lewisbirks

src/main/frontend/pipeline-console-view/pipeline-console/main/components/stages.scss

@@ -14,14 +14,17 @@
   &--left {
     --additional-height: 0px;
     position: sticky;
-    top: calc(var(--header-height) + var(--section-padding));
+    top: calc(var(--pgv-header-height) + var(--section-padding));
     height: calc(
       (100vh + var(--additional-height)) -
-        (var(--header-height) + 100px + var(--section-padding))
+        (var(--pgv-header-height) + 100px + var(--section-padding))
     );
     max-height: calc(
       100vh -
-        (var(--header-height) + var(--section-padding) + var(--section-padding))
+        (
+          var(--pgv-header-height) + var(--section-padding) +
+            var(--section-padding)
+        )
     );
   }
 

src/main/frontend/pipeline-console-view/pipeline-console/main/console-log-card.scss

@@ -9,7 +9,7 @@
 
 .pgv-step-detail-header {
   position: sticky;
-  top: calc(var(--header-height) + 0.375rem);
+  top: calc(var(--pgv-header-height) + 0.375rem);
   z-index: 1;
   display: grid;
   grid-template-columns: 1fr auto;
@@ -101,7 +101,7 @@
 
 .pgv-show-more-logs {
   position: sticky;
-  top: calc(var(--header-height) + 0.375rem + 0.375rem + 2.375rem);
+  top: calc(var(--pgv-header-height) + 0.375rem + 0.375rem + 2.375rem);
   background: var(--card-background);
   box-shadow: 0 0 0.375rem var(--card-background);
   z-index: 10;

src/main/frontend/pipeline-console-view/pipeline-console/main/pipeline-console.scss

@@ -1,3 +1,8 @@
+:root {
+  // can be removed and `--header-height` used directly when jenkins baseline is 2.507
+  --pgv-header-height: var(--header-height, 45.5938px);
+}
+
 .ansi-fg-0 {
   color: var(--black, #333);
 }
@@ -65,7 +70,7 @@
 
 .pgv-sticky-sidebar {
   position: sticky;
-  top: calc(var(--header-height) + var(--section-padding));
+  top: calc(var(--pgv-header-height) + var(--section-padding));
 }
 
 .pgv-skeleton-column {