From 60bd75bdcadc1aa94dce7f9fc78510c801bf3493 Mon Sep 17 00:00:00 2001
From: Kianna <30884335+kiannaquach@users.noreply.github.com>
Date: Fri, 18 Aug 2023 10:44:37 -0700
Subject: [PATCH] UI: [VAULT-19160 VAULT-19159] Dashboard card order, minor
 cleanup tasks, and update page header (#22413)

---
 .../dashboard/quick-actions-card.js           |   2 +-
 .../components/secrets-engines-card.scss      |   3 +
 ui/app/styles/core.scss                       |   1 +
 .../helper-classes/flexbox-and-grid.scss      |  16 +-
 ui/app/styles/helper-classes/spacing.scss     |   9 +
 .../components/auth-button-google.hbs         |   2 +-
 .../dashboard/client-count-card.hbs           | 108 ++++++------
 .../components/dashboard/learn-more-card.hbs  |  32 ++--
 .../dashboard/quick-actions-card.hbs          | 112 ++++++------
 .../components/dashboard/replication-card.hbs | 164 +++++++++---------
 .../dashboard/secrets-engines-card.hbs        | 122 ++++++-------
 .../components/dashboard/survey-link-text.hbs |   8 +
 .../vault-configuration-details-card.hbs      |  72 ++++----
 .../dashboard/vault-version-title.hbs         |  17 +-
 ui/app/templates/components/logo-splash.hbs   |   2 +-
 .../mfa/mfa-login-enforcement-form.hbs        |   4 +-
 .../components/oidc-callback-splash.hbs       |   2 +-
 ui/app/templates/components/splash-page.hbs   |   2 +-
 .../components/transit-key-action/verify.hbs  |   8 +-
 ui/app/templates/vault/cluster/dashboard.hbs  |  84 ++++-----
 .../vault/cluster/oidc-provider-ns.hbs        |   2 +-
 .../templates/vault/cluster/oidc-provider.hbs |   2 +-
 .../cluster/secrets/backend/versions.hbs      |   2 +-
 ui/app/templates/vault/cluster/unseal.hbs     |   2 +-
 ui/app/templates/vault/error.hbs              |   2 +-
 .../addon/components/certificate-card.hbs     |   2 +-
 .../core/addon/components/layout-loading.hbs  |   2 +-
 .../addon/templates/components/list-item.hbs  |   6 +-
 .../components/replication-mode-summary.hbs   |   2 +-
 .../addon/components/page/overview.hbs        |   2 +-
 .../addon/components/page/pki-overview.hbs    |   6 +-
 .../components/pki-import-pem-bundle.hbs      |   8 +-
 .../components/pki-issuer-cross-sign.hbs      |   4 +-
 ui/tests/acceptance/dashboard-test.js         |   4 +-
 .../dashboard/quick-actions-card-test.js      |   2 +-
 35 files changed, 431 insertions(+), 387 deletions(-)
 create mode 100644 ui/app/styles/components/secrets-engines-card.scss
 create mode 100644 ui/app/templates/components/dashboard/survey-link-text.hbs

diff --git a/ui/app/components/dashboard/quick-actions-card.js b/ui/app/components/dashboard/quick-actions-card.js
index 6652c98d532b..8c34780a62e4 100644
--- a/ui/app/components/dashboard/quick-actions-card.js
+++ b/ui/app/components/dashboard/quick-actions-card.js
@@ -46,7 +46,7 @@ export default class DashboardQuickActionsCard extends Component {
     switch (this.selectedAction) {
       case 'Find KV secrets':
         return {
-          title: 'Secret Path',
+          title: 'Secret path',
           subText: 'Path of the secret you want to read, including the mount. E.g., secret/data/foo.',
           buttonText: 'Read secrets',
           model: 'secret-v2',
diff --git a/ui/app/styles/components/secrets-engines-card.scss b/ui/app/styles/components/secrets-engines-card.scss
new file mode 100644
index 000000000000..017f49759da8
--- /dev/null
+++ b/ui/app/styles/components/secrets-engines-card.scss
@@ -0,0 +1,3 @@
+.secrets-engines-card {
+  min-height: 480px;
+}
diff --git a/ui/app/styles/core.scss b/ui/app/styles/core.scss
index 045e0fe2116b..1eae551a5b9c 100644
--- a/ui/app/styles/core.scss
+++ b/ui/app/styles/core.scss
@@ -103,6 +103,7 @@
 @import './components/search-select';
 @import './components/selectable-card';
 @import './components/selectable-card-container';
+@import './components/secrets-engines-card';
 // action-block extends selectable-card
 @import './components/action-block';
 @import './components/shamir-modal-flow';
diff --git a/ui/app/styles/helper-classes/flexbox-and-grid.scss b/ui/app/styles/helper-classes/flexbox-and-grid.scss
index 39ca8fc09cf0..668efff1a580 100644
--- a/ui/app/styles/helper-classes/flexbox-and-grid.scss
+++ b/ui/app/styles/helper-classes/flexbox-and-grid.scss
@@ -24,6 +24,10 @@
   gap: $spacing-m;
 }
 
+.has-gap-l {
+  gap: $spacing-l;
+}
+
 // Alignment of the items
 .is-flex-v-centered {
   display: flex;
@@ -72,13 +76,17 @@
   flex-basis: 100%;
 }
 
-.is-flex-1 {
+.is-flex-grow-1 {
   flex-grow: 1;
   &.basis-0 {
     flex-basis: 0;
   }
 }
 
+.is-flex-1 {
+  flex: 1;
+}
+
 .is-no-flex-grow {
   flex-grow: 0 !important;
 }
@@ -101,6 +109,12 @@
   }
 }
 
+@include until($mobile) {
+  .is-flex-row {
+    flex-flow: column wrap;
+  }
+}
+
 /* CSS GRID */
 .is-grid {
   display: grid;
diff --git a/ui/app/styles/helper-classes/spacing.scss b/ui/app/styles/helper-classes/spacing.scss
index 22aa94b3f268..66581cd96359 100644
--- a/ui/app/styles/helper-classes/spacing.scss
+++ b/ui/app/styles/helper-classes/spacing.scss
@@ -95,6 +95,15 @@
   margin-bottom: -$spacing-m;
 }
 
+.has-top-margin-xxs {
+  margin: $spacing-xxs 0;
+}
+.has-right-margin-xxs {
+  margin-right: $spacing-xxs;
+}
+.has-left-margin-xxs {
+  margin-left: $spacing-xxs;
+}
 .has-bottom-margin-xxs {
   margin-bottom: $spacing-xxs !important;
 }
diff --git a/ui/app/templates/components/auth-button-google.hbs b/ui/app/templates/components/auth-button-google.hbs
index 984957270c2d..c8c96ad81742 100644
--- a/ui/app/templates/components/auth-button-google.hbs
+++ b/ui/app/templates/components/auth-button-google.hbs
@@ -69,7 +69,7 @@
     </g>
   </svg>
 
-  <div class="is-flex-1 text">
+  <div class="is-flex-grow-1 text">
     Sign in with Google
   </div>
 </div>
\ No newline at end of file
diff --git a/ui/app/templates/components/dashboard/client-count-card.hbs b/ui/app/templates/components/dashboard/client-count-card.hbs
index 2291c4f8930d..1dc918653494 100644
--- a/ui/app/templates/components/dashboard/client-count-card.hbs
+++ b/ui/app/templates/components/dashboard/client-count-card.hbs
@@ -1,60 +1,60 @@
-<div class="is-flex-between">
-  <h3 class="title is-4 has-bottom-margin-xxs" data-test-client-count-title>
-    Client count
-  </h3>
+<Hds::Card::Container @hasBorder={{true}} class="has-padding-l has-bottom-padding-m">
+  <div class="is-flex-between">
+    <h3 class="title is-4 has-bottom-margin-xxs" data-test-client-count-title>
+      Client count
+    </h3>
 
-  <div>
-    <Hds::Link::Inline @route="vault.cluster.clients.dashboard" class="is-no-underline">Details</Hds::Link::Inline>
+    <LinkTo @route="vault.cluster.clients.dashboard" class="is-no-underline">Details</LinkTo>
   </div>
-</div>
 
-<hr class="has-background-gray-100" />
+  <hr class="has-background-gray-100" />
 
-{{#if this.noActivityData}}
-  {{! This will likely not be show since the client activity api was changed to always return data. In the past it
+  {{#if this.noActivityData}}
+    {{! This will likely not be show since the client activity api was changed to always return data. In the past it
   would return no activity data. Adding this empty state here to match the current client count behavior }}
-  <Clients::NoData @config={{this.clientConfig}} />
-{{else}}
-  <div class="is-grid grid-2-columns grid-gap-2 has-top-margin-m grid-align-items-start is-flex-v-centered">
-    {{#if this.fetchClientActivity.isRunning}}
-      <VaultLogoSpinner />
-    {{else}}
-      <StatText
-        @label="Total"
-        @value={{this.activityData.total.clients}}
-        @size="l"
-        @subText="The number of clients in this billing period ({{date-format
-          this.licenseStartTime
-          'MMM yyyy'
-        }} - {{date-format this.updatedAt 'MMM yyyy'}})."
-        data-test-stat-text="total-clients"
-      />
-      <StatText
-        @label="New"
-        @value={{this.currentMonthActivityTotalCount}}
-        @size="l"
-        @subText="The number of clients new to Vault in the current month."
-        data-test-stat-text="new-clients"
-      />
-    {{/if}}
-  </div>
-
-  {{#unless this.fetchClientActivity.isRunning}}
-    <div class="has-top-margin-l is-flex-center">
-      <Hds::Button
-        @text="Refresh"
-        @isIconOnly={{true}}
-        @color="tertiary"
-        @icon="sync"
-        disabled={{this.fetchClientActivity.isRunning}}
-        class="has-padding-xxs"
-        {{on "click" (perform this.fetchClientActivity)}}
-        data-test-refresh
-      />
-      <small class="has-left-margin-xs has-text-grey">
-        Updated
-        {{date-format this.updatedAt "MMM dd, yyyy HH:mm:SS"}}
-      </small>
+    <Clients::NoData @config={{this.clientConfig}} />
+  {{else}}
+    <div class="is-grid grid-2-columns grid-gap-2 has-top-margin-m grid-align-items-start is-flex-v-centered">
+      {{#if this.fetchClientActivity.isRunning}}
+        <VaultLogoSpinner />
+      {{else}}
+        <StatText
+          @label="Total"
+          @value={{this.activityData.total.clients}}
+          @size="l"
+          @subText="The number of clients in this billing period ({{date-format
+            this.licenseStartTime
+            'MMM yyyy'
+          }} - {{date-format this.updatedAt 'MMM yyyy'}})."
+          data-test-stat-text="total-clients"
+        />
+        <StatText
+          @label="New"
+          @value={{this.currentMonthActivityTotalCount}}
+          @size="l"
+          @subText="The number of clients new to Vault in the current month."
+          data-test-stat-text="new-clients"
+        />
+      {{/if}}
     </div>
-  {{/unless}}
-{{/if}}
\ No newline at end of file
+
+    {{#unless this.fetchClientActivity.isRunning}}
+      <div class="has-top-margin-l is-flex-center">
+        <Hds::Button
+          @text="Refresh"
+          @isIconOnly={{true}}
+          @color="tertiary"
+          @icon="sync"
+          disabled={{this.fetchClientActivity.isRunning}}
+          class="has-padding-xxs"
+          {{on "click" (perform this.fetchClientActivity)}}
+          data-test-refresh
+        />
+        <small class="has-left-margin-xs has-text-grey">
+          Updated
+          {{date-format this.updatedAt "MMM dd, yyyy HH:mm:SS"}}
+        </small>
+      </div>
+    {{/unless}}
+  {{/if}}
+</Hds::Card::Container>
\ No newline at end of file
diff --git a/ui/app/templates/components/dashboard/learn-more-card.hbs b/ui/app/templates/components/dashboard/learn-more-card.hbs
index c809dbcb6ce1..8a480b50c263 100644
--- a/ui/app/templates/components/dashboard/learn-more-card.hbs
+++ b/ui/app/templates/components/dashboard/learn-more-card.hbs
@@ -1,15 +1,17 @@
-<h3 class="title is-4 has-bottom-margin-xxs" data-test-learn-more-title>Learn more</h3>
-<div class="sub-text" data-test-learn-more-subtext>
-  Explore the features of Vault and learn advance practices with the following tutorials and documentation.
-</div>
-<div class="has-top-margin-xs" data-test-learn-more-links>
-  {{#each this.learnMoreLinks as |learnMoreLink|}}
-    <Hds::Link::Standalone
-      @icon={{learnMoreLink.icon}}
-      @text={{learnMoreLink.title}}
-      @href={{learnMoreLink.link}}
-      class="has-bottom-margin-xs"
-      data-test-learn-more-link={{learnMoreLink.title}}
-    />
-  {{/each}}
-</div>
\ No newline at end of file
+<Hds::Card::Container @hasBorder={{true}} class="has-padding-l">
+  <h3 class="title is-4 has-bottom-margin-xxs" data-test-learn-more-title>Learn more</h3>
+  <div class="sub-text" data-test-learn-more-subtext>
+    Explore the features of Vault and learn advance practices with the following tutorials and documentation.
+  </div>
+  <div class="has-top-margin-xs" data-test-learn-more-links>
+    {{#each this.learnMoreLinks as |learnMoreLink|}}
+      <Hds::Link::Standalone
+        @icon={{learnMoreLink.icon}}
+        @text={{learnMoreLink.title}}
+        @href={{learnMoreLink.link}}
+        class="has-bottom-margin-xs"
+        data-test-learn-more-link={{learnMoreLink.title}}
+      />
+    {{/each}}
+  </div>
+</Hds::Card::Container>
\ No newline at end of file
diff --git a/ui/app/templates/components/dashboard/quick-actions-card.hbs b/ui/app/templates/components/dashboard/quick-actions-card.hbs
index d019a71c79a3..315921cd8b74 100644
--- a/ui/app/templates/components/dashboard/quick-actions-card.hbs
+++ b/ui/app/templates/components/dashboard/quick-actions-card.hbs
@@ -1,63 +1,65 @@
-<h3 class="title is-4">Quick actions</h3>
-
-<div class="has-bottom-margin-m">
-  <h4 class="title is-6">Secrets engines</h4>
-  <SearchSelect
-    @id="secrets-engines-select"
-    @options={{this.mountOptions}}
-    @selectLimit="1"
-    @disallowNewItems={{true}}
-    @fallbackComponent="input-search"
-    @onChange={{this.handleSearchEngineSelect}}
-    @placeholder="Type to select a mount"
-    @displayInherit={{true}}
-    @shouldRenderName={{true}}
-    @passObject={{true}}
-    @objectKeys={{array "type"}}
-    class="is-marginless"
-    data-test-secrets-engines-select
-  />
-</div>
-
-{{#if this.selectedEngine}}
-  <h4 class="title is-6">Action</h4>
-  <Select
-    @name="action-select"
-    @options={{this.actionOptions}}
-    @isFullwidth={{true}}
-    @selectedValue={{this.selectedAction}}
-    @onChange={{this.setSelectedAction}}
-    @noDefault={{true}}
-  />
-
-  {{#if this.searchSelectParams.model}}
-    <h4 class="title is-6" data-test-search-select-params-title>{{this.searchSelectParams.title}}</h4>
+<Hds::Card::Container @hasBorder={{true}} class="has-padding-l">
+  <h3 class="title is-4">Quick actions</h3>
 
+  <div class="has-bottom-margin-m">
+    <h4 class="title is-6">Secrets engines</h4>
     <SearchSelect
-      class="is-flex-1"
+      @id="secrets-engines-select"
+      @options={{this.mountOptions}}
       @selectLimit="1"
-      @models={{array this.searchSelectParams.model}}
-      @backend={{this.mountPath}}
-      @placeholder={{this.searchSelectParams.placeholder}}
       @disallowNewItems={{true}}
-      @onChange={{this.handleActionSelect}}
       @fallbackComponent="input-search"
-      @nameKey={{this.searchSelectParams.nameKey}}
-      @disabled={{not this.searchSelectParams.model}}
+      @onChange={{this.handleSearchEngineSelect}}
+      @placeholder="Type to select a mount"
+      @displayInherit={{true}}
+      @shouldRenderName={{true}}
+      @passObject={{true}}
+      @objectKeys={{array "type"}}
+      class="is-marginless"
+      data-test-secrets-engines-select
     />
+  </div>
+
+  {{#if this.selectedEngine}}
+    <h4 class="title is-6">Action</h4>
+    <Select
+      @name="action-select"
+      @options={{this.actionOptions}}
+      @isFullwidth={{true}}
+      @selectedValue={{this.selectedAction}}
+      @onChange={{this.setSelectedAction}}
+      @noDefault={{true}}
+    />
+
+    {{#if this.searchSelectParams.model}}
+      <h4 class="title is-6" data-test-search-select-params-title>{{this.searchSelectParams.title}}</h4>
+
+      <SearchSelect
+        class="is-flex-grow-1"
+        @selectLimit="1"
+        @models={{array this.searchSelectParams.model}}
+        @backend={{this.mountPath}}
+        @placeholder={{this.searchSelectParams.placeholder}}
+        @disallowNewItems={{true}}
+        @onChange={{this.handleActionSelect}}
+        @fallbackComponent="input-search"
+        @nameKey={{this.searchSelectParams.nameKey}}
+        @disabled={{not this.searchSelectParams.model}}
+      />
 
-    <div>
-      <button
-        type="button"
-        class="button is-primary has-top-margin-m"
-        disabled={{(not (and this.selectedAction this.selectedEngine this.paramValue))}}
-        {{on "click" this.navigateToPage}}
-        data-test-button={{this.searchSelectParams.buttonText}}
-      >
-        {{this.searchSelectParams.buttonText}}
-      </button>
-    </div>
+      <div>
+        <button
+          type="button"
+          class="button is-primary has-top-margin-m"
+          disabled={{(not (and this.selectedAction this.selectedEngine this.paramValue))}}
+          {{on "click" this.navigateToPage}}
+          data-test-button={{this.searchSelectParams.buttonText}}
+        >
+          {{this.searchSelectParams.buttonText}}
+        </button>
+      </div>
+    {{/if}}
+  {{else}}
+    <EmptyState @title="No mount selected" @message="Select a mount above to get started." />
   {{/if}}
-{{else}}
-  <EmptyState @title="No mount selected" @message="Select a mount above to get started." />
-{{/if}}
\ No newline at end of file
+</Hds::Card::Container>
\ No newline at end of file
diff --git a/ui/app/templates/components/dashboard/replication-card.hbs b/ui/app/templates/components/dashboard/replication-card.hbs
index b5e8b0dadba2..a8a80ebac8ad 100644
--- a/ui/app/templates/components/dashboard/replication-card.hbs
+++ b/ui/app/templates/components/dashboard/replication-card.hbs
@@ -2,91 +2,93 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: BUSL-1.1
 ~}}
+<Hds::Card::Container @hasBorder={{true}} class="has-padding-l has-bottom-padding-m">
 
-<div class="is-flex-between">
-  <h3 class="title is-4 has-bottom-margin-xxs" data-test-client-count-title>
-    Replication
-  </h3>
+  <div class="is-flex-between">
+    <h3 class="title is-4 has-bottom-margin-xxs" data-test-client-count-title>
+      Replication
+    </h3>
 
-  <LinkTo class="is-no-underline" @route="vault.cluster.replication.index">
-    Details
-  </LinkTo>
-</div>
-
-{{! check if dr replication and performance replication exists }}
-{{#if (or @replication.dr.clusterId @replication.performance.clusterId)}}
-  <hr class="has-background-gray-100" />
-  {{! check if user has access to both perf replication and dr replication }}
-  {{#if (and @version.hasPerfReplication @version.hasDRReplication)}}
-    <div
-      class="is-grid grid-2-columns grid-gap-2 has-top-margin-m has-bottom-margin-xs grid-align-items-start"
-      data-test-dr-perf-replication
-    >
-      <Dashboard::ReplicationStateText
-        @title="DR primary"
-        @name="dr"
-        @state={{@replication.dr.state}}
-        @clusterStates={{cluster-states @replication.dr.state}}
-      />
-      <Dashboard::ReplicationStateText
-        @title="Perf primary"
-        @name="performance"
-        @state={{if @replication.performance.clusterId @replication.performance.state "not set up"}}
-        @clusterStates={{if @replication.performance.clusterId (cluster-states @replication.performance.state)}}
-      />
-    </div>
-    {{! if user only has access to dr replication }}
-  {{else if @version.hasDRReplication}}
-    <LinkTo
-      class="title is-5 has-text-weight-semibold is-marginless"
-      @route="vault.cluster.replication.mode.index"
-      @model="dr"
-    >
-      DR Primary
+    <LinkTo class="is-no-underline" @route="vault.cluster.replication.index">
+      Details
     </LinkTo>
+  </div>
 
-    <div
-      class="is-grid grid-2-columns grid-gap-2 has-top-margin-m has-bottom-margin-m grid-align-items-start"
-      data-test-dr-replication
-    >
-      <Dashboard::ReplicationStateText
-        @title="state"
-        @state={{@replication.dr.state}}
-        @clusterStates={{cluster-states @replication.dr.state}}
-        @subText="The current operating state of the cluster."
-      />
-      <StatText
-        @label="known secondaries"
-        @value={{@replication.dr.knownSecondaries.length}}
-        @size="l"
-        @subText="Number of secondaries connected to this primary."
-        data-test-stat-text="known secondaries"
+  {{! check if dr replication and performance replication exists }}
+  {{#if (or @replication.dr.clusterId @replication.performance.clusterId)}}
+    <hr class="has-background-gray-100" />
+    {{! check if user has access to both perf replication and dr replication }}
+    {{#if (and @version.hasPerfReplication @version.hasDRReplication)}}
+      <div
+        class="is-grid grid-2-columns grid-gap-2 has-top-margin-m has-bottom-margin-xs grid-align-items-start"
+        data-test-dr-perf-replication
+      >
+        <Dashboard::ReplicationStateText
+          @title="DR primary"
+          @name="dr"
+          @state={{@replication.dr.state}}
+          @clusterStates={{cluster-states @replication.dr.state}}
+        />
+        <Dashboard::ReplicationStateText
+          @title="Perf primary"
+          @name="performance"
+          @state={{if @replication.performance.clusterId @replication.performance.state "not set up"}}
+          @clusterStates={{if @replication.performance.clusterId (cluster-states @replication.performance.state)}}
+        />
+      </div>
+      {{! if user only has access to dr replication }}
+    {{else if @version.hasDRReplication}}
+      <LinkTo
+        class="title is-5 has-text-weight-semibold is-marginless"
+        @route="vault.cluster.replication.mode.index"
+        @model="dr"
+      >
+        DR Primary
+      </LinkTo>
+
+      <div
+        class="is-grid grid-2-columns grid-gap-2 has-top-margin-m has-bottom-margin-m grid-align-items-start"
+        data-test-dr-replication
+      >
+        <Dashboard::ReplicationStateText
+          @title="state"
+          @state={{@replication.dr.state}}
+          @clusterStates={{cluster-states @replication.dr.state}}
+          @subText="The current operating state of the cluster."
+        />
+        <StatText
+          @label="known secondaries"
+          @value={{@replication.dr.knownSecondaries.length}}
+          @size="l"
+          @subText="Number of secondaries connected to this primary."
+          data-test-stat-text="known secondaries"
+        />
+      </div>
+    {{/if}}
+    <div class="has-top-margin-s is-flex-center">
+      <Hds::Button
+        @text="Refresh"
+        @isIconOnly={{true}}
+        @color="tertiary"
+        @icon="sync"
+        class="has-padding-xxs"
+        {{on "click" @refresh}}
+        data-test-refresh
       />
+      <small class="has-left-margin-xs has-text-grey">
+        Updated
+        {{date-format @updatedAt "MMM dd, yyyy HH:mm:SS"}}
+      </small>
     </div>
+  {{else}}
+    <EmptyState
+      @title="Replication not set up"
+      @message="Data will be listed here. Enable a primary replication cluster to get started."
+      class="has-top-margin-m"
+    >
+      <div>
+        <LinkTo @route="vault.cluster.replication">Enable replication</LinkTo>
+      </div>
+    </EmptyState>
   {{/if}}
-  <div class="has-top-margin-s is-flex-center">
-    <Hds::Button
-      @text="Refresh"
-      @isIconOnly={{true}}
-      @color="tertiary"
-      @icon="sync"
-      class="has-padding-xxs"
-      {{on "click" @refresh}}
-      data-test-refresh
-    />
-    <small class="has-left-margin-xs has-text-grey">
-      Updated
-      {{date-format @updatedAt "MMM dd, yyyy HH:mm:SS"}}
-    </small>
-  </div>
-{{else}}
-  <EmptyState
-    @title="Replication not set up"
-    @message="Data will be listed here. Enable a primary replication cluster to get started."
-    class="has-top-margin-m"
-  >
-    <div>
-      <LinkTo @route="vault.cluster.replication">Enable replication</LinkTo>
-    </div>
-  </EmptyState>
-{{/if}}
\ No newline at end of file
+</Hds::Card::Container>
\ No newline at end of file
diff --git a/ui/app/templates/components/dashboard/secrets-engines-card.hbs b/ui/app/templates/components/dashboard/secrets-engines-card.hbs
index 09925a501326..b8ac3f444e29 100644
--- a/ui/app/templates/components/dashboard/secrets-engines-card.hbs
+++ b/ui/app/templates/components/dashboard/secrets-engines-card.hbs
@@ -1,72 +1,72 @@
-<h3 class="title is-4 has-left-margin-xxs" data-test-dashboard-secrets-engines-header>Secrets engines</h3>
-<Hds::Table @caption="Five secrets engines" class="is-border-spacing-revert" data-test-dashboard-secrets-engines-table>
-  <:body as |B|>
-    {{#each this.filteredSecretsEngines as |backend|}}
-      <B.Tr data-test-secrets-engines-row={{backend.id}}>
-        <B.Td class="is-flex-between is-flex-center has-gap-m">
-          <div>
-            <div class="is-flex-center">
-              {{#if backend.icon}}
-                <ToolTip @horizontalPosition="left" as |T|>
-                  <T.Trigger>
-                    <Icon @name={{backend.icon}} class={{unless backend.isSupportedBackend "has-text-grey"}} />
-                  </T.Trigger>
-                  <T.Content @defaultClass="tool-tip">
-                    <div class="box">
-                      {{or backend.engineType backend.path}}
-                    </div>
-                  </T.Content>
-                </ToolTip>
-              {{/if}}
-              {{#if backend.path}}
-                {{#if backend.isSupportedBackend}}
-                  <LinkTo
-                    @route={{backend.backendLink}}
-                    @model={{backend.id}}
-                    class="has-text-black has-text-weight-semibold"
-                    data-test-secret-path
-                  >
-                    {{backend.path}}
-                  </LinkTo>
-                {{else}}
-                  <span class="has-text-grey" data-test-secret-path>{{backend.path}}</span>
+<Hds::Card::Container @hasBorder={{true}} class="has-padding-l secrets-engines-card">
+  <h3 class="title is-4 has-left-margin-xxs" data-test-dashboard-secrets-engines-header>Secrets engines</h3>
+  <Hds::Table @caption="Five secrets engines" class="is-border-spacing-revert" data-test-dashboard-secrets-engines-table>
+    <:body as |B|>
+      {{#each this.filteredSecretsEngines as |backend|}}
+        <B.Tr data-test-secrets-engines-row={{backend.id}}>
+          <B.Td class="is-flex-between is-flex-center has-gap-m">
+            <div>
+              <div class="is-flex-center">
+                {{#if backend.icon}}
+                  <ToolTip @horizontalPosition="left" as |T|>
+                    <T.Trigger>
+                      <Icon @name={{backend.icon}} class={{unless backend.isSupportedBackend "has-text-grey"}} />
+                    </T.Trigger>
+                    <T.Content @defaultClass="tool-tip">
+                      <div class="box">
+                        {{or backend.engineType backend.path}}
+                      </div>
+                    </T.Content>
+                  </ToolTip>
+                {{/if}}
+                {{#if backend.path}}
+                  {{#if backend.isSupportedBackend}}
+                    <LinkTo
+                      @route={{backend.backendLink}}
+                      @model={{backend.id}}
+                      class="has-text-black has-text-weight-semibold"
+                      data-test-secret-path
+                    >
+                      {{backend.path}}
+                    </LinkTo>
+                  {{else}}
+                    <span class="has-text-grey" data-test-secret-path>{{backend.path}}</span>
+                  {{/if}}
                 {{/if}}
+              </div>
+              {{#if backend.accessor}}
+                <code class="has-text-grey is-size-8" data-test-accessor>
+                  {{backend.accessor}}
+                </code>
+              {{/if}}
+              {{#if backend.description}}
+                <div data-test-description class="truncate-first-line">
+                  {{backend.description}}
+                </div>
               {{/if}}
             </div>
-            {{#if backend.accessor}}
-              <code class="has-text-grey is-size-8" data-test-accessor>
-                {{backend.accessor}}
-              </code>
-            {{/if}}
-            {{#if backend.description}}
-              <div data-test-description class="truncate-first-line">
-                {{backend.description}}
-              </div>
-            {{/if}}
-          </div>
-          <div>
             {{#if backend.isSupportedBackend}}
-              <Hds::Link::Inline
+              <LinkTo
                 @route={{backend.backendLink}}
                 @model={{backend.id}}
                 class="has-text-weight-semibold is-no-underline"
                 data-test-view
               >
                 View
-              </Hds::Link::Inline>
+              </LinkTo>
             {{/if}}
-          </div>
-        </B.Td>
-      </B.Tr>
-    {{/each}}
-  </:body>
-</Hds::Table>
-<div class="is-flex-end has-top-margin-s">
-  <Hds::Link::Standalone
-    class="has-text-weight-semibold is-no-underline"
-    @icon="arrow-right"
-    @iconPosition="trailing"
-    @text="Show all"
-    @route="vault.cluster.secrets.backends"
-  />
-</div>
\ No newline at end of file
+          </B.Td>
+        </B.Tr>
+      {{/each}}
+    </:body>
+  </Hds::Table>
+  <div class="is-flex-end has-top-margin-s">
+    <Hds::Link::Standalone
+      class="has-text-weight-semibold is-no-underline"
+      @icon="arrow-right"
+      @iconPosition="trailing"
+      @text="Show all"
+      @route="vault.cluster.secrets.backends"
+    />
+  </div>
+</Hds::Card::Container>
\ No newline at end of file
diff --git a/ui/app/templates/components/dashboard/survey-link-text.hbs b/ui/app/templates/components/dashboard/survey-link-text.hbs
new file mode 100644
index 000000000000..43b4dbf30e56
--- /dev/null
+++ b/ui/app/templates/components/dashboard/survey-link-text.hbs
@@ -0,0 +1,8 @@
+<div class="has-padding-s has-top-margin-m" data-test-feedback-form>
+  <small>
+    Don't see what you're looking for on this page? Let us know via our
+    <Hds::Link::Inline @icon="external-link" @href="https://hashicorp.sjc1.qualtrics.com/jfe/form/SV_1SNUsZLdWHpfw0e">
+      feedback form.
+    </Hds::Link::Inline>
+  </small>
+</div>
\ No newline at end of file
diff --git a/ui/app/templates/components/dashboard/vault-configuration-details-card.hbs b/ui/app/templates/components/dashboard/vault-configuration-details-card.hbs
index c59f504ad703..ca21d9e5d6fb 100644
--- a/ui/app/templates/components/dashboard/vault-configuration-details-card.hbs
+++ b/ui/app/templates/components/dashboard/vault-configuration-details-card.hbs
@@ -1,36 +1,38 @@
-<h3 class="title is-4" data-test-configuration-details-title>Configuration details</h3>
+<Hds::Card::Container @hasBorder={{true}} class="has-padding-l">
+  <h3 class="title is-4" data-test-configuration-details-title>Configuration details</h3>
 
-<Hds::Table @caption="Vault configuration details" class="is-border-spacing-revert">
-  <:body as |B|>
-    <B.Tr>
-      <B.Td>API_ADDR</B.Td>
-      <B.Td data-test-vault-config-details="api_addr">{{or @vaultConfiguration.api_addr "None"}}</B.Td>
-    </B.Tr>
-    <B.Tr>
-      <B.Td>Default lease TTL</B.Td>
-      <B.Td data-test-vault-config-details="default_lease_ttl">{{format-duration
-          @vaultConfiguration.default_lease_ttl
-        }}</B.Td>
-    </B.Tr>
-    <B.Tr>
-      <B.Td>Max lease TTL</B.Td>
-      <B.Td data-test-vault-config-details="max_lease_ttl">{{format-duration @vaultConfiguration.max_lease_ttl}}</B.Td>
-    </B.Tr>
-    <B.Tr>
-      <B.Td>TLS</B.Td>
-      <B.Td data-test-vault-config-details="tls_disable">{{this.tlsDisabled}}</B.Td>
-    </B.Tr>
-    <B.Tr>
-      <B.Td>Log format</B.Td>
-      <B.Td data-test-vault-config-details="log_format">{{or @vaultConfiguration.log_format "None"}}</B.Td>
-    </B.Tr>
-    <B.Tr>
-      <B.Td>Log level</B.Td>
-      <B.Td data-test-vault-config-details="log_level">{{@vaultConfiguration.log_level}}</B.Td>
-    </B.Tr>
-    <B.Tr>
-      <B.Td>Storage type</B.Td>
-      <B.Td data-test-vault-config-details="type">{{@vaultConfiguration.storage.type}}</B.Td>
-    </B.Tr>
-  </:body>
-</Hds::Table>
\ No newline at end of file
+  <Hds::Table @caption="Vault configuration details" class="is-border-spacing-revert">
+    <:body as |B|>
+      <B.Tr>
+        <B.Td>API_ADDR</B.Td>
+        <B.Td data-test-vault-config-details="api_addr">{{or @vaultConfiguration.api_addr "None"}}</B.Td>
+      </B.Tr>
+      <B.Tr>
+        <B.Td>Default lease TTL</B.Td>
+        <B.Td data-test-vault-config-details="default_lease_ttl">{{format-duration
+            @vaultConfiguration.default_lease_ttl
+          }}</B.Td>
+      </B.Tr>
+      <B.Tr>
+        <B.Td>Max lease TTL</B.Td>
+        <B.Td data-test-vault-config-details="max_lease_ttl">{{format-duration @vaultConfiguration.max_lease_ttl}}</B.Td>
+      </B.Tr>
+      <B.Tr>
+        <B.Td>TLS</B.Td>
+        <B.Td data-test-vault-config-details="tls_disable">{{this.tlsDisabled}}</B.Td>
+      </B.Tr>
+      <B.Tr>
+        <B.Td>Log format</B.Td>
+        <B.Td data-test-vault-config-details="log_format">{{or @vaultConfiguration.log_format "None"}}</B.Td>
+      </B.Tr>
+      <B.Tr>
+        <B.Td>Log level</B.Td>
+        <B.Td data-test-vault-config-details="log_level">{{@vaultConfiguration.log_level}}</B.Td>
+      </B.Tr>
+      <B.Tr>
+        <B.Td>Storage type</B.Td>
+        <B.Td data-test-vault-config-details="type">{{@vaultConfiguration.storage.type}}</B.Td>
+      </B.Tr>
+    </:body>
+  </Hds::Table>
+</Hds::Card::Container>
\ No newline at end of file
diff --git a/ui/app/templates/components/dashboard/vault-version-title.hbs b/ui/app/templates/components/dashboard/vault-version-title.hbs
index add28e8bb702..339a64602619 100644
--- a/ui/app/templates/components/dashboard/vault-version-title.hbs
+++ b/ui/app/templates/components/dashboard/vault-version-title.hbs
@@ -1,8 +1,9 @@
-<div class="has-top-margin-l has-bottom-margin-l is-flex-center">
-  <h1 class="title is-v-centered is-marginless" data-test-dashboard-version-header>
-    {{this.versionHeader}}
-  </h1>
-  <span class="has-left-margin-xxs">
-    <Hds::Badge @text={{this.namespaceDisplay}} @icon="org" data-test-badge-namespace />
-  </span>
-</div>
\ No newline at end of file
+<PageHeader as |p|>
+  <p.levelLeft>
+    <h1 class="title is-3" data-test-dashboard-version-header>
+      {{this.versionHeader}}
+      <Hds::Badge @text={{this.namespaceDisplay}} @icon="org" data-test-badge-namespace />
+    </h1>
+  </p.levelLeft>
+</PageHeader>
+<hr class="has-top-margin-xxs has-bottom-margin-l has-background-gray-200" />
\ No newline at end of file
diff --git a/ui/app/templates/components/logo-splash.hbs b/ui/app/templates/components/logo-splash.hbs
index ca68711456c2..633a4c31a3e7 100644
--- a/ui/app/templates/components/logo-splash.hbs
+++ b/ui/app/templates/components/logo-splash.hbs
@@ -3,7 +3,7 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
-<div class="is-flex-v-centered is-flex-1">
+<div class="is-flex-v-centered is-flex-grow-1">
   <div class="columns is-centered">
     <div class="column is-narrow has-text-centered has-text-grey-dark has-current-color-fill">
       <LogoEdition />
diff --git a/ui/app/templates/components/mfa/mfa-login-enforcement-form.hbs b/ui/app/templates/components/mfa/mfa-login-enforcement-form.hbs
index 00ef7a50f18f..a827c3392108 100644
--- a/ui/app/templates/components/mfa/mfa-login-enforcement-form.hbs
+++ b/ui/app/templates/components/mfa/mfa-login-enforcement-form.hbs
@@ -58,7 +58,7 @@
     />
     {{#each this.targets as |target|}}
       <div class="is-flex-center has-border-top-light" data-test-mlef-target={{target.label}}>
-        <InfoTableRow @label={{target.label}} class="is-flex-1 has-no-shadow">
+        <InfoTableRow @label={{target.label}} class="is-flex-grow-1 has-no-shadow">
           {{#if target.value.id}}
             {{target.value.name}}
             <span class="tag has-left-margin-s">{{target.value.id}}</span>
@@ -85,7 +85,7 @@
         @onChange={{this.onTargetSelect}}
         data-test-mlef-select="target-type"
       />
-      <div class="has-left-margin-s is-flex-1">
+      <div class="has-left-margin-s is-flex-grow-1">
         {{#if (eq this.selectedTargetType "accessor")}}
           <MountAccessorSelect
             @value={{this.selectedTargetValue}}
diff --git a/ui/app/templates/components/oidc-callback-splash.hbs b/ui/app/templates/components/oidc-callback-splash.hbs
index 2df6b60118eb..998886f759cf 100644
--- a/ui/app/templates/components/oidc-callback-splash.hbs
+++ b/ui/app/templates/components/oidc-callback-splash.hbs
@@ -3,7 +3,7 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
-<div class="splash-page-container section is-flex-v-centered-tablet is-flex-1 is-fullwidth">
+<div class="splash-page-container section is-flex-v-centered-tablet is-flex-grow-1 is-fullwidth">
   <div class="columns is-centered is-gapless is-fullwidth">
     <div class="column is-4-desktop is-6-tablet">
       <div class="has-text-grey has-bottom-margin-m has-current-color-fill">
diff --git a/ui/app/templates/components/splash-page.hbs b/ui/app/templates/components/splash-page.hbs
index 53bee45936ed..844c2740f6bc 100644
--- a/ui/app/templates/components/splash-page.hbs
+++ b/ui/app/templates/components/splash-page.hbs
@@ -7,7 +7,7 @@
 {{#if @hasAltContent}}
   {{yield (hash altContent=(component "splash-page/splash-content"))}}
 {{else}}
-  <div class="splash-page-container section is-flex-v-centered-tablet is-flex-1 is-fullwidth">
+  <div class="splash-page-container section is-flex-v-centered-tablet is-flex-grow-1 is-fullwidth">
     <div class="columns is-centered is-gapless is-fullwidth">
       <div class="column is-4-desktop is-6-tablet">
         <div class="splash-page-header">
diff --git a/ui/app/templates/components/transit-key-action/verify.hbs b/ui/app/templates/components/transit-key-action/verify.hbs
index 9d71a404c69d..2f6d8809f79b 100644
--- a/ui/app/templates/components/transit-key-action/verify.hbs
+++ b/ui/app/templates/components/transit-key-action/verify.hbs
@@ -143,14 +143,14 @@
         </div>
         <div class="column is-two-thirds is-flex-column">
           {{#if (or (and @verification (eq @verification "HMAC")) @hmac)}}
-            <div class="field is-flex-column is-flex-1">
-              <div class="control is-flex-column is-flex-1">
+            <div class="field is-flex-column is-flex-grow-1">
+              <div class="control is-flex-column is-flex-grow-1">
                 <JsonEditor @title="HMAC" @value={{@hmac}} @valueUpdated={{action (mut @hmac)}} @mode="ruby" />
               </div>
             </div>
           {{else}}
-            <div class="field is-flex-column is-flex-1">
-              <div class="control is-flex-column is-flex-1">
+            <div class="field is-flex-column is-flex-grow-1">
+              <div class="control is-flex-column is-flex-grow-1">
                 <JsonEditor
                   @title="Signature"
                   @value={{@signature}}
diff --git a/ui/app/templates/vault/cluster/dashboard.hbs b/ui/app/templates/vault/cluster/dashboard.hbs
index 31f93c4747fa..fa0e209c1c92 100644
--- a/ui/app/templates/vault/cluster/dashboard.hbs
+++ b/ui/app/templates/vault/cluster/dashboard.hbs
@@ -1,49 +1,49 @@
 <Dashboard::VaultVersionTitle />
 
-<div class="is-grid grid-2-columns grid-gap-2 has-bottom-margin-m grid-align-items-start">
-  {{#if (and @model.version.isEnterprise @model.license)}}
-    <Hds::Card::Container @hasBorder={{true}} class="has-padding-l has-bottom-padding-m is-flex-column is-flex-half">
-      <Dashboard::ClientCountCard @license={{@model.license}} />
-    </Hds::Card::Container>
-  {{/if}}
+<div class="has-bottom-margin-xl">
+  <div class="is-flex-row has-gap-l">
+    {{#if @model.version.isEnterprise}}
 
-  {{#if (and @model.version.isEnterprise @model.isRootNamespace)}}
-    <Hds::Card::Container @hasBorder={{true}} class="has-padding-l has-bottom-padding-m is-flex-column is-flex-half">
-      <Dashboard::ReplicationCard
-        @replication={{@model.replication}}
-        @version={{@model.version}}
-        @refresh={{this.refreshModel}}
-        @updatedAt={{this.replicationUpdatedAt}}
-      />
-    </Hds::Card::Container>
-  {{/if}}
+      <div class="is-flex-column is-flex-1 has-gap-l">
+        {{#if @model.license}}
+          <Dashboard::ClientCountCard @license={{@model.license}} />
+        {{/if}}
+        {{#if @model.isRootNamespace}}
+          <Dashboard::ReplicationCard
+            @replication={{@model.replication}}
+            @version={{@model.version}}
+            @refresh={{this.refreshModel}}
+            @updatedAt={{this.replicationUpdatedAt}}
+          />
+        {{/if}}
+        <Dashboard::SecretsEnginesCard @secretsEngines={{@model.secretsEngines}} />
+      </div>
 
-  <Hds::Card::Container @hasBorder={{true}} class="has-padding-l is-flex-column is-flex-half">
-    <Dashboard::SecretsEnginesCard @secretsEngines={{@model.secretsEngines}} />
-  </Hds::Card::Container>
+      <div class="is-flex-column is-flex-1 has-gap-l">
+        <Dashboard::QuickActionsCard @secretsEngines={{@model.secretsEngines}} />
+        {{#if @model.vaultConfiguration}}
+          <Dashboard::VaultConfigurationDetailsCard @vaultConfiguration={{@model.vaultConfiguration}} />
+        {{/if}}
+        <div>
+          <Dashboard::LearnMoreCard />
+          <Dashboard::SurveyLinkText />
+        </div>
+      </div>
 
-  <Hds::Card::Container @hasBorder={{true}} class="has-padding-l is-flex-column is-flex-half">
-    <Dashboard::QuickActionsCard @secretsEngines={{@model.secretsEngines}} />
-  </Hds::Card::Container>
-
-  <div>
-    <Hds::Card::Container @hasBorder={{true}} class="has-padding-l is-flex-column is-flex-half">
-      <Dashboard::LearnMoreCard />
-    </Hds::Card::Container>
-
-    <div class="has-padding-s has-top-margin-m" data-test-feedback-form>
-      <small>
-        Don't see what you're looking for on this page? Let us know via our
-        <Hds::Link::Inline @icon="external-link" @href="https://hashicorp.sjc1.qualtrics.com/jfe/form/SV_1SNUsZLdWHpfw0e">
-          feedback form
-        </Hds::Link::Inline>
-      </small>
-    </div>
+    {{else}}
+      <div class="is-flex-column is-flex-1 has-gap-l">
+        <Dashboard::SecretsEnginesCard @secretsEngines={{@model.secretsEngines}} />
+        <div>
+          <Dashboard::LearnMoreCard />
+          <Dashboard::SurveyLinkText />
+        </div>
+      </div>
+      <div class="is-flex-column is-flex-1 has-gap-l">
+        <Dashboard::QuickActionsCard @secretsEngines={{@model.secretsEngines}} />
+        {{#if @model.vaultConfiguration}}
+          <Dashboard::VaultConfigurationDetailsCard @vaultConfiguration={{@model.vaultConfiguration}} />
+        {{/if}}
+      </div>
+    {{/if}}
   </div>
-
-  {{#if @model.vaultConfiguration}}
-    <Hds::Card::Container @hasBorder={{true}} class="has-padding-l is-flex-column is-flex-half">
-      <Dashboard::VaultConfigurationDetailsCard @vaultConfiguration={{@model.vaultConfiguration}} />
-    </Hds::Card::Container>
-  {{/if}}
 </div>
\ No newline at end of file
diff --git a/ui/app/templates/vault/cluster/oidc-provider-ns.hbs b/ui/app/templates/vault/cluster/oidc-provider-ns.hbs
index 29745a876e99..24f57426bdc0 100644
--- a/ui/app/templates/vault/cluster/oidc-provider-ns.hbs
+++ b/ui/app/templates/vault/cluster/oidc-provider-ns.hbs
@@ -3,7 +3,7 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
-<div class="splash-page-container section is-flex-v-centered-tablet is-flex-1 is-fullwidth">
+<div class="splash-page-container section is-flex-v-centered-tablet is-flex-grow-1 is-fullwidth">
   <div class="columns is-centered is-gapless is-fullwidth">
     <div class="column is-4-desktop is-6-tablet">
       {{#if this.model.error}}
diff --git a/ui/app/templates/vault/cluster/oidc-provider.hbs b/ui/app/templates/vault/cluster/oidc-provider.hbs
index 29745a876e99..24f57426bdc0 100644
--- a/ui/app/templates/vault/cluster/oidc-provider.hbs
+++ b/ui/app/templates/vault/cluster/oidc-provider.hbs
@@ -3,7 +3,7 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
-<div class="splash-page-container section is-flex-v-centered-tablet is-flex-1 is-fullwidth">
+<div class="splash-page-container section is-flex-v-centered-tablet is-flex-grow-1 is-fullwidth">
   <div class="columns is-centered is-gapless is-fullwidth">
     <div class="column is-4-desktop is-6-tablet">
       {{#if this.model.error}}
diff --git a/ui/app/templates/vault/cluster/secrets/backend/versions.hbs b/ui/app/templates/vault/cluster/secrets/backend/versions.hbs
index 3f891921248c..06a297fd6e99 100644
--- a/ui/app/templates/vault/cluster/secrets/backend/versions.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backend/versions.hbs
@@ -32,7 +32,7 @@
     as |Item|
   >
     <Item.content>
-      <div class="columns is-flex-1">
+      <div class="columns is-flex-grow-1">
         <div>
           <Icon @name="history" class="has-text-grey" />
           Version
diff --git a/ui/app/templates/vault/cluster/unseal.hbs b/ui/app/templates/vault/cluster/unseal.hbs
index 92178b5c161f..ed9a02983d4b 100644
--- a/ui/app/templates/vault/cluster/unseal.hbs
+++ b/ui/app/templates/vault/cluster/unseal.hbs
@@ -4,7 +4,7 @@
 ~}}
 
 {{#if this.showLicenseError}}
-  <div class="section is-flex-v-centered-tablet is-flex-1 is-fullwidth">
+  <div class="section is-flex-v-centered-tablet is-flex-grow-1 is-fullwidth">
     <div class="columns is-centered is-gapless is-fullwidth">
       <EmptyState
         class="empty-state-transparent"
diff --git a/ui/app/templates/vault/error.hbs b/ui/app/templates/vault/error.hbs
index c23fcad306af..1a557c05d078 100644
--- a/ui/app/templates/vault/error.hbs
+++ b/ui/app/templates/vault/error.hbs
@@ -3,7 +3,7 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
-<div class="is-flex-1 is-flex-v-centered">
+<div class="is-flex-grow-1 is-flex-v-centered">
   <div class="empty-state-content">
     <div class="is-flex-v-centered has-bottom-margin-xxl">
       <div class="brand-icon-large">
diff --git a/ui/lib/core/addon/components/certificate-card.hbs b/ui/lib/core/addon/components/certificate-card.hbs
index d667e80ef925..8834e96b9b89 100644
--- a/ui/lib/core/addon/components/certificate-card.hbs
+++ b/ui/lib/core/addon/components/certificate-card.hbs
@@ -12,7 +12,7 @@
   <span class="has-left-margin-s">
     <Icon @name="certificate" @size="24" data-test-certificate-icon />
   </span>
-  <div class="has-left-margin-m is-min-width-0 is-flex-1">
+  <div class="has-left-margin-m is-min-width-0 is-flex-grow-1">
     <p class="has-text-weight-bold" data-test-certificate-label>
       {{this.format}}
     </p>
diff --git a/ui/lib/core/addon/components/layout-loading.hbs b/ui/lib/core/addon/components/layout-loading.hbs
index 33527c9fc6d2..5f4a19406980 100644
--- a/ui/lib/core/addon/components/layout-loading.hbs
+++ b/ui/lib/core/addon/components/layout-loading.hbs
@@ -3,7 +3,7 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
-<div class="is-flex-v-centered is-flex-1 loader-inner-page" data-test-layout-loading>
+<div class="is-flex-v-centered is-flex-grow-1 loader-inner-page" data-test-layout-loading>
   <div class="columns is-centered">
     <div class="column is-narrow has-text-centered has-text-grey-dark has-current-color-fill">
       <div class="level is-mobile">
diff --git a/ui/lib/core/addon/templates/components/list-item.hbs b/ui/lib/core/addon/templates/components/list-item.hbs
index e3c4434d103a..b9e98d9a75f2 100644
--- a/ui/lib/core/addon/templates/components/list-item.hbs
+++ b/ui/lib/core/addon/templates/components/list-item.hbs
@@ -14,11 +14,11 @@
     data-test-list-item-link
   >
     <div class="level is-mobile">
-      <div class="level-left is-flex-1" data-test-list-item-content>
+      <div class="level-left is-flex-grow-1" data-test-list-item-content>
         <LinkTo
           @route={{this.link.route}}
           @models={{this.link.models}}
-          class="has-text-weight-semibold has-text-black is-display-flex is-flex-1 is-no-underline"
+          class="has-text-weight-semibold has-text-black is-display-flex is-flex-grow-1 is-no-underline"
         >
           {{yield (hash content=(component "list-item/content"))}}
         </LinkTo>
@@ -35,7 +35,7 @@
 {{else}}
   <div class="list-item-row">
     <div class="level is-mobile">
-      <div class="level-left is-flex-1 has-text-weight-semibold" data-test-list-item>
+      <div class="level-left is-flex-grow-1 has-text-weight-semibold" data-test-list-item>
         {{yield (hash content=(component "list-item/content"))}}
       </div>
       <div class="level-right">
diff --git a/ui/lib/core/addon/templates/components/replication-mode-summary.hbs b/ui/lib/core/addon/templates/components/replication-mode-summary.hbs
index 427e8fe9d65e..ae94e978e086 100644
--- a/ui/lib/core/addon/templates/components/replication-mode-summary.hbs
+++ b/ui/lib/core/addon/templates/components/replication-mode-summary.hbs
@@ -6,7 +6,7 @@
 {{#if this.isMenu}}
   {{! this is the status menu }}
   <div class="level is-mobile">
-    <div class="is-flex-1">
+    <div class="is-flex-grow-1">
       {{#if this.replicationUnsupported}}
         Unsupported
       {{else if this.replicationEnabled}}
diff --git a/ui/lib/kubernetes/addon/components/page/overview.hbs b/ui/lib/kubernetes/addon/components/page/overview.hbs
index 3812c955b326..8bf1d365b580 100644
--- a/ui/lib/kubernetes/addon/components/page/overview.hbs
+++ b/ui/lib/kubernetes/addon/components/page/overview.hbs
@@ -25,7 +25,7 @@
     <OverviewCard @cardTitle="Generate credentials" @subText="Quickly generate credentials by typing the role name.">
       <div class="has-top-margin-m is-flex">
         <SearchSelect
-          class="is-flex-1"
+          class="is-flex-grow-1"
           @placeholder="Type to find a role..."
           @disallowNewItems={{true}}
           @options={{this.roleOptions}}
diff --git a/ui/lib/pki/addon/components/page/pki-overview.hbs b/ui/lib/pki/addon/components/page/pki-overview.hbs
index d2b13eb50932..c91d0bc68147 100644
--- a/ui/lib/pki/addon/components/page/pki-overview.hbs
+++ b/ui/lib/pki/addon/components/page/pki-overview.hbs
@@ -25,7 +25,7 @@
   <OverviewCard @cardTitle="Issue certificate" @subText="Begin issuing a certificate by choosing a role.">
     <div class="has-top-margin-m is-flex">
       <SearchSelect
-        class="is-flex-1"
+        class="is-flex-grow-1"
         @selectLimit="1"
         @models={{array "pki/role"}}
         @backend={{@engine.id}}
@@ -50,7 +50,7 @@
   <OverviewCard @cardTitle="View certificate" @subText="Quickly view a certificate by typing its serial number.">
     <div class="has-top-margin-m {{unless this.certificateValue 'is-flex'}}">
       <SearchSelect
-        class="is-flex-1"
+        class="is-flex-grow-1"
         @selectLimit="1"
         @models={{array "pki/certificate/base"}}
         @backend={{@engine.id}}
@@ -75,7 +75,7 @@
   <OverviewCard @cardTitle="View issuer" @subText="Choose or type an issuer name or ID to view its details">
     <div class="has-top-margin-m is-flex">
       <SearchSelect
-        class="is-flex-1"
+        class="is-flex-grow-1"
         @selectLimit="1"
         @models={{array "pki/issuer"}}
         @backend={{@engine.id}}
diff --git a/ui/lib/pki/addon/components/pki-import-pem-bundle.hbs b/ui/lib/pki/addon/components/pki-import-pem-bundle.hbs
index 26ccf251ab2a..7d843b1caba1 100644
--- a/ui/lib/pki/addon/components/pki-import-pem-bundle.hbs
+++ b/ui/lib/pki/addon/components/pki-import-pem-bundle.hbs
@@ -5,12 +5,12 @@
 
 {{#if this.importedResponse}}
   <div class="is-flex-start has-top-margin-xs">
-    <div class="is-flex-1 basis-0 has-text-grey has-bottom-margin-xs">
+    <div class="is-flex-grow-1 basis-0 has-text-grey has-bottom-margin-xs">
       <h2>
         Imported Issuer
       </h2>
     </div>
-    <div class="is-flex-1 basis-0 has-text-grey has-bottom-margin-xs">
+    <div class="is-flex-grow-1 basis-0 has-text-grey has-bottom-margin-xs">
       <h2>
         Imported Key
       </h2>
@@ -23,7 +23,7 @@
         data-test-import-pair={{concat imported.issuer "_" imported.key}}
       >
         <div class="is-flex-start">
-          <div class="is-flex-1 basis-0 has-bottom-margin-xs" data-test-imported-issuer>
+          <div class="is-flex-grow-1 basis-0 has-bottom-margin-xs" data-test-imported-issuer>
             {{#if imported.issuer}}
               <LinkTo @route="issuers.issuer.details" @model={{imported.issuer}}>
                 {{imported.issuer}}
@@ -32,7 +32,7 @@
               None
             {{/if}}
           </div>
-          <div class="is-flex-1 basis-0 has-bottom-margin-xs" data-test-imported-key>
+          <div class="is-flex-grow-1 basis-0 has-bottom-margin-xs" data-test-imported-key>
             {{#if imported.key}}
               <LinkTo @route="keys.key.details" @model={{imported.key}}>
                 {{imported.key}}
diff --git a/ui/lib/pki/addon/components/pki-issuer-cross-sign.hbs b/ui/lib/pki/addon/components/pki-issuer-cross-sign.hbs
index bc6af6105a45..10b67f0f291c 100644
--- a/ui/lib/pki/addon/components/pki-issuer-cross-sign.hbs
+++ b/ui/lib/pki/addon/components/pki-issuer-cross-sign.hbs
@@ -20,7 +20,7 @@
     </p>
     <div class="is-flex-start">
       {{#each this.inputFields as |column|}}
-        <div class="is-flex-1 basis-0 has-text-grey has-bottom-margin-xs">
+        <div class="is-flex-grow-1 basis-0 has-text-grey has-bottom-margin-xs">
           <h2 data-test-info-table-label={{column.key}}>
             {{column.label}}
             {{#if column.helpText}}
@@ -40,7 +40,7 @@
             />
             {{#each (map-by "key" this.inputFields) as |columnAttr|}}
               {{#let (get crossSignRow columnAttr) as |data|}}
-                <div data-test-info-table-column={{columnAttr}} class="is-flex-1 basis-0 has-bottom-margin-xs">
+                <div data-test-info-table-column={{columnAttr}} class="is-flex-grow-1 basis-0 has-bottom-margin-xs">
                   {{#if (eq columnAttr "intermediateMount")}}
                     <LinkTo class="has-text-black has-text-weight-semibold" @route="overview" @model={{data}}>
                       {{data}}
diff --git a/ui/tests/acceptance/dashboard-test.js b/ui/tests/acceptance/dashboard-test.js
index 2d214c126569..6161b84e3cb2 100644
--- a/ui/tests/acceptance/dashboard-test.js
+++ b/ui/tests/acceptance/dashboard-test.js
@@ -114,7 +114,7 @@ module('Acceptance | landing page dashboard', function (hooks) {
 
   test('display the version number for the title', async function (assert) {
     await visit('/vault/dashboard');
-    assert.dom('[data-test-dashboard-version-header]').hasText('Vault v1.9.0');
+    assert.dom('[data-test-dashboard-version-header]').hasText('Vault v1.9.0 root');
   });
 
   module('secrets engines card', function () {
@@ -144,7 +144,7 @@ module('Acceptance | landing page dashboard', function (hooks) {
       assert.dom('[data-test-learn-more-links] a').exists({ count: 4 });
       assert
         .dom('[data-test-feedback-form]')
-        .hasText("Don't see what you're looking for on this page? Let us know via our feedback form ");
+        .hasText("Don't see what you're looking for on this page? Let us know via our feedback form. ");
     });
   });
 
diff --git a/ui/tests/integration/components/dashboard/quick-actions-card-test.js b/ui/tests/integration/components/dashboard/quick-actions-card-test.js
index b0fee22cf7f1..1f95e610480d 100644
--- a/ui/tests/integration/components/dashboard/quick-actions-card-test.js
+++ b/ui/tests/integration/components/dashboard/quick-actions-card-test.js
@@ -126,7 +126,7 @@ module('Integration | Component | dashboard/quick-actions-card', function (hooks
     await selectChoose('.search-select', 'secrets-1-test');
     assert.dom('[data-test-component="empty-state"]').doesNotExist();
     await fillIn('[data-test-select="action-select"]', 'Find KV secrets');
-    assert.dom('[data-test-search-select-params-title]').hasText('Secret Path');
+    assert.dom('[data-test-search-select-params-title]').hasText('Secret path');
     assert.dom('[data-test-button="Read secrets"]').exists({ count: 1 });
   });
 });