Match styling from other page titles and get above z-index of the tim…

…eline (#24068)
hashicorp · Sep 26, 2024 · c07806e · c07806e
1 parent 6fb59ca
commit c07806e
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 30 deletions.
diff --git 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
@@ -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>