From e0db44ce2b8f6c5f27e71814f41fb792f54c4a5e Mon Sep 17 00:00:00 2001
From: Phil Renaud <phil@riotindustries.com>
Date: Thu, 26 Sep 2024 11:55:25 -0400
Subject: [PATCH] Match styling from other page titles and get above z-index of
 the timeline

---
 ui/app/styles/components/timeline.scss |  9 ++++
 ui/app/templates/jobs/job/versions.hbs | 58 +++++++++++++-------------
 2 files changed, 37 insertions(+), 30 deletions(-)

diff --git a/ui/app/styles/components/timeline.scss b/ui/app/styles/components/timeline.scss
index 89908d66693..50536c60544 100644
--- a/ui/app/styles/components/timeline.scss
+++ b/ui/app/styles/components/timeline.scss
@@ -138,3 +138,12 @@
     }
   }
 }
+
+.versions-page-header {
+  z-index: $z-base + 1;
+  margin-bottom: 2rem;
+
+  .hds-page-header__main {
+    flex-direction: unset;
+  }
+}
diff --git a/ui/app/templates/jobs/job/versions.hbs b/ui/app/templates/jobs/job/versions.hbs
index 044fc9ab153..1e89cc653d9 100644
--- a/ui/app/templates/jobs/job/versions.hbs
+++ b/ui/app/templates/jobs/job/versions.hbs
@@ -7,40 +7,38 @@
 <JobSubnav @job={{this.job}} />
 <section class="section">
 
-  <Hds::PageHeader as |PH|>
+  <Hds::PageHeader class="versions-page-header" as |PH|>
     <PH.Actions>
-      <Hds::SegmentedGroup as |S|>
-        <S.Dropdown data-test-diff-facet as |dd|>
-          <dd.ToggleButton
-            @text={{if this.diffVersion (concat "Diff against version " this.diffVersion) "Diff against previous version" }}
-            @color="secondary"
-          />
+      <Hds::Dropdown data-test-diff-facet as |dd|>
+        <dd.ToggleButton
+          @text={{if this.diffVersion (concat "Diff against version " this.diffVersion) "Diff against previous version" }}
+          @color="secondary"
+        />
+        <dd.Radio
+          name="diff"
+          checked={{eq this.diffVersion ""}}
+          {{on "change" (action this.setDiffVersion "")}}
+        >
+          previous version
+        </dd.Radio>
+        {{#each this.optionsDiff key="label" as |option|}}
           <dd.Radio
             name="diff"
-            checked={{eq this.diffVersion ""}}
-            {{on "change" (action this.setDiffVersion "")}}
-          >
-            previous version
+            {{on "change" (action this.setDiffVersion
+              option.value
+            )}}
+            @value={{option.label}}
+            checked={{eq this.diffVersion option.value}}
+            data-test-dropdown-option={{option.label}}
+        >
+            {{option.label}}
           </dd.Radio>
-          {{#each this.optionsDiff key="label" as |option|}}
-            <dd.Radio
-              name="diff"
-              {{on "change" (action this.setDiffVersion
-                option.value
-              )}}
-              @value={{option.label}}
-              checked={{eq this.diffVersion option.value}}
-              data-test-dropdown-option={{option.label}}
-          >
-              {{option.label}}
-            </dd.Radio>
-          {{else}}
-            <dd.Generic data-test-dropdown-empty>
-              No versions
-            </dd.Generic>
-          {{/each}}
-        </S.Dropdown>
-      </Hds::SegmentedGroup>
+        {{else}}
+          <dd.Generic data-test-dropdown-empty>
+            No versions
+          </dd.Generic>
+        {{/each}}
+      </Hds::Dropdown>
     </PH.Actions>
   </Hds::PageHeader>