From e1833ba983d625b0f36f2bf2fd84bcfc08085ec8 Mon Sep 17 00:00:00 2001
From: GitLab Bot <gitlab-bot@gitlab.com>
Date: Mon, 27 May 2024 21:17:05 +0000
Subject: [PATCH] Add latest changes from gitlab-org/gitlab@master

---
 .rubocop_todo/layout/argument_alignment.yml   | 13 -----
 .../layout/space_in_lambda_literal.yml        | 12 ----
 .../components/abuse_category_selector.vue    |  5 +-
 .../blob/components/blob_header_filepath.vue  |  2 +-
 .../boards/components/board_card.vue          |  2 +-
 .../boards/components/board_card_inner.vue    |  4 +-
 .../components/board_content_sidebar.vue      |  2 +-
 .../components/board_settings_sidebar.vue     |  2 +-
 .../ci/common/private/job_name_component.vue  |  2 +-
 .../ci/job_details/components/empty_state.vue |  2 +-
 .../components/sidebar/sidebar_detail_row.vue |  2 +-
 .../graph/components/job_item.vue             |  4 +-
 .../graph/components/linked_pipeline.vue      |  2 +-
 .../components/linked_pipelines_column.vue    |  2 +-
 .../components/stage_column_component.vue     |  2 +-
 .../drawer/pipeline_editor_drawer.vue         |  2 +-
 .../legacy_pipeline_stage.vue                 |  4 +-
 .../components/pipeline_labels.vue            |  2 +-
 .../ci/reports/components/report_section.vue  |  2 +-
 .../registration/platforms_drawer.vue         |  2 +-
 .../components/clusters_main_view.vue         |  2 +-
 .../design_description/description_form.vue   |  4 +-
 .../components/design_sidebar.vue             |  5 +-
 .../shared/findings_drawer_item.vue           |  2 +-
 .../components/canary_ingress.vue             |  2 +-
 .../components/kubernetes/kubernetes_pods.vue | 14 ++++-
 .../environment_details/empty_state.vue       |  2 +-
 .../incidents/timeline_events_form.vue        |  2 +-
 .../components/workload_details_item.vue      |  2 +-
 .../components/workload_layout.vue            | 13 ++++-
 .../components/workload_stats.vue             | 20 ++++++-
 .../components/workload_table.vue             |  5 ++
 .../merge_conflict_resolver_app.vue           |  2 +-
 .../reviewers/reviewers_container.vue         |  2 +-
 .../components/association_count_card.vue     |  2 +-
 .../project/components/expiration_toggle.vue  |  2 +-
 .../permissions/components/settings_panel.vue |  4 +-
 .../components/commit_options_dropdown.vue    |  2 +-
 .../related_issues/components/issue_token.vue |  2 +-
 .../components/release_block_assets.vue       |  2 +-
 .../components/assignees/assignee_title.vue   |  2 +-
 .../assignees/uncollapsed_assignee_list.vue   |  2 +-
 .../components/crm_contacts/crm_contacts.vue  |  2 +-
 .../components/date/sidebar_inherit_date.vue  |  4 +-
 .../labels_select_vue/dropdown_title.vue      |  4 +-
 .../components/participants/participants.vue  |  2 +-
 .../components/reviewers/reviewer_title.vue   |  2 +-
 .../components/reviewers/reviewers.vue        |  2 +-
 .../reviewers/uncollapsed_reviewer_list.vue   |  2 +-
 .../components/sidebar_editable_item.vue      |  2 +-
 .../components/time_tracking/time_tracker.vue |  2 +-
 .../snippets/components/snippet_header.vue    |  4 +-
 .../super_sidebar/components/counter.vue      |  2 +-
 .../super_sidebar/components/help_center.vue  |  2 +-
 .../super_sidebar/components/nav_item.vue     |  2 +-
 .../components/organization_switcher.vue      |  2 +-
 .../components/super_sidebar.vue              |  4 +-
 .../super_sidebar/components/user_bar.vue     |  2 +-
 .../storage_usage_overview_card.vue           |  2 +-
 .../components/deployment/deployment_list.vue |  2 +-
 .../components/mr_collapsible_extension.vue   |  2 +-
 .../components/state_container.vue            |  2 +-
 .../components/states/ready_to_merge.vue      | 10 ++--
 .../components/states/squash_before_merge.vue |  2 +-
 .../components/sidebar/sidebar_assignees.vue  |  4 +-
 .../components/sidebar/sidebar_status.vue     |  2 +-
 .../components/markdown/toolbar.vue           |  2 +-
 .../source_viewer/components/chunk_line.vue   |  2 +-
 .../source_viewer/components/chunk_new.vue    |  2 +-
 .../avatar_upload_dropzone.vue                |  2 +-
 .../components/section_layout.vue             |  2 +-
 .../whats_new/components/feature.vue          |  2 +-
 .../design_preview/design_description.vue     |  2 +-
 .../shared/work_item_link_child_metadata.vue  |  2 +-
 .../components/hierarchy.vue                  |  4 +-
 .../pajamas/empty_state_component.html.haml   |  2 +-
 .../pajamas/single_stat_component.html.haml   |  2 +-
 app/helpers/events_helper.rb                  |  2 +-
 .../analytics/cycle_analytics/stage_entity.rb | 16 +++---
 app/serializers/base_discussion_entity.rb     | 12 ++--
 app/serializers/blob_entity.rb                |  2 +-
 app/serializers/build_action_entity.rb        |  4 +-
 app/serializers/build_details_entity.rb       | 34 +++++------
 app/serializers/ci/dag_job_entity.rb          |  2 +-
 app/serializers/ci/job_entity.rb              | 16 +++---
 app/serializers/ci/pipeline_entity.rb         | 20 +++----
 app/serializers/ci/trigger_entity.rb          |  2 +-
 .../concerns/user_status_tooltip.rb           |  4 +-
 .../container_repository_entity.rb            |  2 +-
 app/serializers/container_tag_entity.rb       |  2 +-
 app/views/events/event/_private.html.haml     |  2 +-
 app/views/groups/labels/index.html.haml       |  2 +-
 .../import/shared/_imported_badge.html.haml   |  2 +-
 app/views/layouts/terms.html.haml             |  2 +-
 .../shared/issuable/_search_bar.html.haml     |  2 +-
 app/views/shared/notes/_hints.html.haml       |  2 +-
 app/views/shared/projects/_project.html.haml  |  2 +-
 .../shared/projects/_project_card.html.haml   |  2 +-
 app/views/users/show.html.haml                |  2 +-
 config/tailwind.config.js                     |  9 +++
 doc/policy/maintenance.md                     |  6 +-
 doc/user/group/epics/manage_epics.md          |  4 +-
 lib/gitlab/error_tracking/detailed_error.rb   | 56 +++++++++----------
 lib/gitlab/external_authorization/access.rb   |  8 +--
 lib/gitlab/gfm/reference_rewriter.rb          |  2 +-
 lib/gitlab/git/blob.rb                        |  2 +-
 lib/gitlab/git/conflict/file.rb               |  4 +-
 lib/gitlab/git/repository.rb                  | 30 +++++-----
 lib/gitlab/git_access.rb                      |  4 +-
 .../gitaly_client/object_pool_service.rb      |  8 +--
 lib/gitlab/gitaly_client/operation_service.rb | 28 +++++-----
 lib/gitlab/gitaly_client/remote_service.rb    | 12 ++--
 .../gitaly_client/repository_service.rb       |  2 +-
 lib/gitlab/gitaly_client/util.rb              |  6 +-
 package.json                                  |  2 +-
 .../blob_header_filepath_spec.js.snap         |  2 +-
 .../graph/components/graph_component_spec.js  |  2 +-
 .../findings_drawer_spec.js.snap              | 32 +++++------
 .../kubernetes/kubernetes_pods_spec.js        | 14 ++++-
 .../components/workload_layout_spec.js        | 20 +++++--
 .../components/workload_stats_spec.js         | 35 ++++++++++++
 yarn.lock                                     |  8 +--
 122 files changed, 382 insertions(+), 305 deletions(-)

diff --git a/.rubocop_todo/layout/argument_alignment.yml b/.rubocop_todo/layout/argument_alignment.yml
index e4cbcd0d97a..a7175e382c1 100644
--- a/.rubocop_todo/layout/argument_alignment.yml
+++ b/.rubocop_todo/layout/argument_alignment.yml
@@ -242,19 +242,6 @@ Layout/ArgumentAlignment:
     - 'lib/gitlab/diff/rendered/notebook/diff_file.rb'
     - 'lib/gitlab/diff/suggestions_parser.rb'
     - 'lib/gitlab/email/hook/delivery_metrics_observer.rb'
-    - 'lib/gitlab/error_tracking/detailed_error.rb'
-    - 'lib/gitlab/external_authorization/access.rb'
-    - 'lib/gitlab/gfm/reference_rewriter.rb'
-    - 'lib/gitlab/git/blob.rb'
-    - 'lib/gitlab/git/conflict/file.rb'
-    - 'lib/gitlab/git/repository.rb'
-    - 'lib/gitlab/git_access.rb'
-    - 'lib/gitlab/gitaly_client/object_pool_service.rb'
-    - 'lib/gitlab/gitaly_client/operation_service.rb'
-    - 'lib/gitlab/gitaly_client/remote_service.rb'
-    - 'lib/gitlab/gitaly_client/repository_service.rb'
-    - 'lib/gitlab/gitaly_client/util.rb'
-    - 'lib/gitlab/github_gists_import/importer/gist_importer.rb'
     - 'lib/gitlab/github_import/importer/issue_importer.rb'
     - 'lib/gitlab/github_import/importer/pull_request_importer.rb'
     - 'lib/gitlab/github_import/representation/issue.rb'
diff --git a/.rubocop_todo/layout/space_in_lambda_literal.yml b/.rubocop_todo/layout/space_in_lambda_literal.yml
index f36ae0c5d1d..b634a144d85 100644
--- a/.rubocop_todo/layout/space_in_lambda_literal.yml
+++ b/.rubocop_todo/layout/space_in_lambda_literal.yml
@@ -20,18 +20,6 @@ Layout/SpaceInLambdaLiteral:
     - 'app/models/namespace_statistics.rb'
     - 'app/models/note.rb'
     - 'app/models/note_diff_file.rb'
-    - 'app/serializers/analytics/cycle_analytics/stage_entity.rb'
-    - 'app/serializers/base_discussion_entity.rb'
-    - 'app/serializers/blob_entity.rb'
-    - 'app/serializers/build_action_entity.rb'
-    - 'app/serializers/build_details_entity.rb'
-    - 'app/serializers/ci/dag_job_entity.rb'
-    - 'app/serializers/ci/job_entity.rb'
-    - 'app/serializers/ci/pipeline_entity.rb'
-    - 'app/serializers/ci/trigger_entity.rb'
-    - 'app/serializers/concerns/user_status_tooltip.rb'
-    - 'app/serializers/container_repository_entity.rb'
-    - 'app/serializers/container_tag_entity.rb'
     - 'app/serializers/deploy_keys/basic_deploy_key_entity.rb'
     - 'app/serializers/deployment_cluster_entity.rb'
     - 'app/serializers/deployment_entity.rb'
diff --git a/app/assets/javascripts/abuse_reports/components/abuse_category_selector.vue b/app/assets/javascripts/abuse_reports/components/abuse_category_selector.vue
index be1ec55f292..2b48a8ac24a 100644
--- a/app/assets/javascripts/abuse_reports/components/abuse_category_selector.vue
+++ b/app/assets/javascripts/abuse_reports/components/abuse_category_selector.vue
@@ -76,10 +76,7 @@ export default {
     @close="closeDrawer"
   >
     <template #title>
-      <h2
-        class="gl-font-size-h2 gl-mt-0 gl-mb-0 gl-line-height-24"
-        data-testid="category-drawer-title"
-      >
+      <h2 class="gl-font-size-h2 gl-mt-0 gl-mb-0 gl-leading-24" data-testid="category-drawer-title">
         {{ $options.i18n.title }}
       </h2>
     </template>
diff --git a/app/assets/javascripts/blob/components/blob_header_filepath.vue b/app/assets/javascripts/blob/components/blob_header_filepath.vue
index c225aaf0628..331295042d7 100644
--- a/app/assets/javascripts/blob/components/blob_header_filepath.vue
+++ b/app/assets/javascripts/blob/components/blob_header_filepath.vue
@@ -42,7 +42,7 @@ export default {
 };
 </script>
 <template>
-  <div class="file-header-content d-flex gl-align-items-center gl-line-height-1">
+  <div class="file-header-content d-flex gl-align-items-center gl-leading-1">
     <slot name="filepath-prepend"></slot>
 
     <template v-if="fileName">
diff --git a/app/assets/javascripts/boards/components/board_card.vue b/app/assets/javascripts/boards/components/board_card.vue
index 1adff98ec56..ef1dd3a8bc0 100644
--- a/app/assets/javascripts/boards/components/board_card.vue
+++ b/app/assets/javascripts/boards/components/board_card.vue
@@ -155,7 +155,7 @@ export default {
     :data-item-path="item.referencePath"
     :style="cardStyle"
     data-testid="board-card"
-    class="board-card gl-p-5 gl-rounded-base gl-line-height-normal gl-relative gl-mb-3"
+    class="board-card gl-p-5 gl-rounded-base gl-leading-normal gl-relative gl-mb-3"
     @click="toggleIssue($event)"
   >
     <board-card-inner
diff --git a/app/assets/javascripts/boards/components/board_card_inner.vue b/app/assets/javascripts/boards/components/board_card_inner.vue
index c51d9e438c0..eab694ca4b4 100644
--- a/app/assets/javascripts/boards/components/board_card_inner.vue
+++ b/app/assets/javascripts/boards/components/board_card_inner.vue
@@ -286,7 +286,7 @@ export default {
       <div
         class="gl-display-flex align-items-start gl-flex-wrap-reverse board-card-number-container gl-overflow-hidden"
       >
-        <span class="board-info-items gl-mt-3 gl-line-height-20 gl-display-inline-block">
+        <span class="board-info-items gl-mt-3 gl-leading-20 gl-display-inline-block">
           <gl-loading-icon v-if="isLoading" size="lg" class="gl-mt-5" />
           <span
             v-if="showBoardCardNumber"
@@ -368,7 +368,7 @@ export default {
           v-if="shouldRenderCounter"
           v-gl-tooltip
           :title="assigneeCounterTooltip"
-          class="avatar-counter gl-bg-gray-100 gl-text-gray-900 gl-cursor-help gl-font-weight-bold gl-border-0 gl-line-height-24 gl-ml-n3"
+          class="avatar-counter gl-bg-gray-100 gl-text-gray-900 gl-cursor-help gl-font-weight-bold gl-border-0 gl-leading-24 gl-ml-n3"
           data-placement="bottom"
           >{{ assigneeCounterLabel }}</span
         >
diff --git a/app/assets/javascripts/boards/components/board_content_sidebar.vue b/app/assets/javascripts/boards/components/board_content_sidebar.vue
index eb5098e8f09..86bbb681026 100644
--- a/app/assets/javascripts/boards/components/board_content_sidebar.vue
+++ b/app/assets/javascripts/boards/components/board_content_sidebar.vue
@@ -185,7 +185,7 @@ export default {
       @close="handleClose"
     >
       <template #title>
-        <h2 class="gl-my-0 gl-font-size-h2 gl-line-height-24">{{ sidebarTitle }}</h2>
+        <h2 class="gl-my-0 gl-font-size-h2 gl-leading-24">{{ sidebarTitle }}</h2>
       </template>
       <template #header>
         <sidebar-todo-widget
diff --git a/app/assets/javascripts/boards/components/board_settings_sidebar.vue b/app/assets/javascripts/boards/components/board_settings_sidebar.vue
index 7e8f0ffdc60..9d0d4173806 100644
--- a/app/assets/javascripts/boards/components/board_settings_sidebar.vue
+++ b/app/assets/javascripts/boards/components/board_settings_sidebar.vue
@@ -141,7 +141,7 @@ export default {
       @close="unsetActiveListId"
     >
       <template #title>
-        <h2 class="gl-my-0 gl-font-size-h2 gl-line-height-24">
+        <h2 class="gl-my-0 gl-font-size-h2 gl-leading-24">
           {{ $options.listSettingsText }}
         </h2>
       </template>
diff --git a/app/assets/javascripts/ci/common/private/job_name_component.vue b/app/assets/javascripts/ci/common/private/job_name_component.vue
index 97f0dcaebb2..6b1499be89d 100644
--- a/app/assets/javascripts/ci/common/private/job_name_component.vue
+++ b/app/assets/javascripts/ci/common/private/job_name_component.vue
@@ -35,7 +35,7 @@ export default {
       :status="status"
       :show-tooltip="false"
       :use-link="false"
-      class="gl-line-height-0"
+      class="gl-leading-0"
     />
     <span class="gl-text-truncate mw-70p gl-pl-3 gl-display-inline-block" :title="name">
       {{ name }}
diff --git a/app/assets/javascripts/ci/job_details/components/empty_state.vue b/app/assets/javascripts/ci/job_details/components/empty_state.vue
index ac4f9c0c7fb..7182759062d 100644
--- a/app/assets/javascripts/ci/job_details/components/empty_state.vue
+++ b/app/assets/javascripts/ci/job_details/components/empty_state.vue
@@ -72,7 +72,7 @@ export default {
     </div>
     <div class="gl-empty-state-content gl-mx-auto gl-my-0 gl-m-auto gl-p-5">
       <h1
-        class="gl-font-size-h-display gl-line-height-36 gl-mt-0 gl-mb-0"
+        class="gl-font-size-h-display gl-leading-36 gl-mt-0 gl-mb-0"
         data-testid="job-empty-state-title"
       >
         {{ title }}
diff --git a/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_detail_row.vue b/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_detail_row.vue
index d7726b952de..a0d55fbf679 100644
--- a/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_detail_row.vue
+++ b/app/assets/javascripts/ci/job_details/components/sidebar/sidebar_detail_row.vue
@@ -39,7 +39,7 @@ export default {
 };
 </script>
 <template>
-  <p class="build-sidebar-item gl-line-height-normal gl-display-flex gl-mb-3">
+  <p class="build-sidebar-item gl-leading-normal gl-display-flex gl-mb-3">
     <b v-if="hasTitle" class="gl-mr-3">{{ title }}:</b>
     <gl-link
       v-if="path"
diff --git a/app/assets/javascripts/ci/pipeline_details/graph/components/job_item.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/job_item.vue
index 7b728beb4c4..8ed4e302439 100644
--- a/app/assets/javascripts/ci/pipeline_details/graph/components/job_item.vue
+++ b/app/assets/javascripts/ci/pipeline_details/graph/components/job_item.vue
@@ -327,7 +327,7 @@ export default {
         <ci-icon :status="job.status" :use-link="false" :show-tooltip="false" />
         <div class="gl-pl-3 gl-pr-3 gl-display-flex gl-flex-direction-column gl-pipeline-job-width">
           <div
-            class="gl-text-truncate gl-pr-9 gl-line-height-normal gl-text-left gl-text-gray-700"
+            class="gl-text-truncate gl-pr-9 gl-leading-normal gl-text-left gl-text-gray-700"
             :title="job.name"
           >
             {{ job.name }}
@@ -335,7 +335,7 @@ export default {
           <div
             v-if="showStageName"
             data-testid="stage-name-in-job"
-            class="gl-text-truncate gl-pr-9 gl-font-sm gl-text-gray-500 gl-line-height-normal gl-text-left"
+            class="gl-text-truncate gl-pr-9 gl-font-sm gl-text-gray-500 gl-leading-normal gl-text-left"
           >
             {{ stageName }}
           </div>
diff --git a/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipeline.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipeline.vue
index aacc2b5aca0..4bff3654cae 100644
--- a/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipeline.vue
+++ b/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipeline.vue
@@ -251,7 +251,7 @@ export default {
         />
         <div v-else class="gl-pr-3"><gl-loading-icon size="sm" inline /></div>
         <div
-          class="gl-display-flex gl-flex-direction-column gl-line-height-normal gl-downstream-pipeline-job-width"
+          class="gl-display-flex gl-flex-direction-column gl-leading-normal gl-downstream-pipeline-job-width"
         >
           <span class="gl-text-truncate" data-testid="downstream-title-content">
             {{ downstreamTitle }}
diff --git a/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipelines_column.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipelines_column.vue
index e93b6822397..33608242a2d 100644
--- a/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipelines_column.vue
+++ b/app/assets/javascripts/ci/pipeline_details/graph/components/linked_pipelines_column.vue
@@ -62,7 +62,7 @@ export default {
     'gl-font-weight-bold',
     'gl-pipeline-job-width',
     'gl-text-truncate',
-    'gl-line-height-36',
+    'gl-leading-36',
   ],
   minWidth: `${ONE_COL_WIDTH}px`,
   computed: {
diff --git a/app/assets/javascripts/ci/pipeline_details/graph/components/stage_column_component.vue b/app/assets/javascripts/ci/pipeline_details/graph/components/stage_column_component.vue
index 2cfa60e3b90..b5b74f35edb 100644
--- a/app/assets/javascripts/ci/pipeline_details/graph/components/stage_column_component.vue
+++ b/app/assets/javascripts/ci/pipeline_details/graph/components/stage_column_component.vue
@@ -129,7 +129,7 @@ export default {
     <template #stages>
       <div
         data-testid="stage-column-title"
-        class="stage-column-title gl-display-flex gl-justify-content-space-between gl-relative gl-font-weight-bold gl-pipeline-job-width gl-text-truncate gl-line-height-36 gl-pl-4 -gl-mb-2"
+        class="stage-column-title gl-display-flex gl-justify-content-space-between gl-relative gl-font-weight-bold gl-pipeline-job-width gl-text-truncate gl-leading-36 gl-pl-4 -gl-mb-2"
       >
         <span :title="name" class="gl-text-truncate gl-pr-3 gl-w-17/20">
           {{ name }}
diff --git a/app/assets/javascripts/ci/pipeline_editor/components/drawer/pipeline_editor_drawer.vue b/app/assets/javascripts/ci/pipeline_editor/components/drawer/pipeline_editor_drawer.vue
index c2e4c234d2b..ef96aece767 100644
--- a/app/assets/javascripts/ci/pipeline_editor/components/drawer/pipeline_editor_drawer.vue
+++ b/app/assets/javascripts/ci/pipeline_editor/components/drawer/pipeline_editor_drawer.vue
@@ -9,7 +9,7 @@ import GettingStartedCard from './cards/getting_started_card.vue';
 import PipelineConfigReferenceCard from './cards/pipeline_config_reference_card.vue';
 import VisualizeAndLintCard from './cards/visualize_and_lint_card.vue';
 
-const DRAWER_CARD_STYLES = ['gl-border-bottom-0', 'gl-pt-6!', 'gl-pb-0!', 'gl-line-height-20'];
+const DRAWER_CARD_STYLES = ['gl-border-bottom-0', 'gl-pt-6!', 'gl-pb-0!', 'gl-leading-20'];
 
 export default {
   DRAWER_CARD_STYLES,
diff --git a/app/assets/javascripts/ci/pipeline_mini_graph/legacy_pipeline_stage.vue b/app/assets/javascripts/ci/pipeline_mini_graph/legacy_pipeline_stage.vue
index d4ccfb69b2f..535a51a4ae9 100644
--- a/app/assets/javascripts/ci/pipeline_mini_graph/legacy_pipeline_stage.vue
+++ b/app/assets/javascripts/ci/pipeline_mini_graph/legacy_pipeline_stage.vue
@@ -137,7 +137,7 @@ export default {
 
     <template #header>
       <div
-        class="gl-display-flex gl-align-items-center gl-p-4! gl-min-h-8 gl-border-b-1 gl-border-b-solid gl-border-b-gray-200 gl-font-sm gl-font-weight-bold gl-line-height-1"
+        class="gl-display-flex gl-align-items-center gl-p-4! gl-min-h-8 gl-border-b-1 gl-border-b-solid gl-border-b-gray-200 gl-font-sm gl-font-weight-bold gl-leading-1"
       >
         <template v-if="isLoading">
           <span>{{ $options.i18n.stage }}</span>
@@ -155,7 +155,7 @@ export default {
       data-testid="pipeline-stage-loading-state"
     >
       <gl-loading-icon size="sm" class="gl-mr-3" />
-      <p class="gl-line-height-normal gl-mb-0">{{ $options.i18n.loadingText }}</p>
+      <p class="gl-leading-normal gl-mb-0">{{ $options.i18n.loadingText }}</p>
     </div>
     <ul
       v-else
diff --git a/app/assets/javascripts/ci/pipelines_page/components/pipeline_labels.vue b/app/assets/javascripts/ci/pipelines_page/components/pipeline_labels.vue
index 31d8f207a63..7754e14bbbd 100644
--- a/app/assets/javascripts/ci/pipelines_page/components/pipeline_labels.vue
+++ b/app/assets/javascripts/ci/pipelines_page/components/pipeline_labels.vue
@@ -134,7 +134,7 @@ export default {
       </gl-link>
       <gl-popover :target="autoDevopsTagId" triggers="focus" placement="top">
         <template #title>
-          <div class="gl-font-weight-normal gl-line-height-normal">
+          <div class="gl-font-weight-normal gl-leading-normal">
             <gl-sprintf
               :message="
                 __(
diff --git a/app/assets/javascripts/ci/reports/components/report_section.vue b/app/assets/javascripts/ci/reports/components/report_section.vue
index 6f2f4c65ff4..567603d9c24 100644
--- a/app/assets/javascripts/ci/reports/components/report_section.vue
+++ b/app/assets/javascripts/ci/reports/components/report_section.vue
@@ -188,7 +188,7 @@ export default {
       <div class="media-body gl-display-flex gl-align-items-flex-start gl-flex-direction-row!">
         <div class="js-code-text code-text gl-align-self-center gl-flex-grow-1">
           <div class="gl-display-flex gl-align-items-center">
-            <p class="gl-line-height-normal gl-m-0">{{ headerText }}</p>
+            <p class="gl-leading-normal gl-m-0">{{ headerText }}</p>
             <slot :name="slotName"></slot>
             <help-popover
               v-if="hasPopover"
diff --git a/app/assets/javascripts/ci/runner/components/registration/platforms_drawer.vue b/app/assets/javascripts/ci/runner/components/registration/platforms_drawer.vue
index 84c43c22558..66267ed7b96 100644
--- a/app/assets/javascripts/ci/runner/components/registration/platforms_drawer.vue
+++ b/app/assets/javascripts/ci/runner/components/registration/platforms_drawer.vue
@@ -76,7 +76,7 @@ export default {
     @close="onClose"
   >
     <template #title>
-      <h2 class="gl-my-0 gl-font-size-h2 gl-line-height-24">
+      <h2 class="gl-my-0 gl-font-size-h2 gl-leading-24">
         {{ s__('Runners|Install GitLab Runner') }}
       </h2>
     </template>
diff --git a/app/assets/javascripts/clusters_list/components/clusters_main_view.vue b/app/assets/javascripts/clusters_list/components/clusters_main_view.vue
index aab6d3dc1f0..621479e0d57 100644
--- a/app/assets/javascripts/clusters_list/components/clusters_main_view.vue
+++ b/app/assets/javascripts/clusters_list/components/clusters_main_view.vue
@@ -86,7 +86,7 @@ export default {
         :key="idx"
         :title="tab.title"
         :query-param-value="tab.queryParamValue"
-        class="gl-line-height-20 gl-mt-5"
+        class="gl-leading-20 gl-mt-5"
       >
         <component
           :is="tab.component"
diff --git a/app/assets/javascripts/design_management/components/design_description/description_form.vue b/app/assets/javascripts/design_management/components/design_description/description_form.vue
index 03ebc73015a..9a83680f9f1 100644
--- a/app/assets/javascripts/design_management/components/design_description/description_form.vue
+++ b/app/assets/javascripts/design_management/components/design_description/description_form.vue
@@ -168,7 +168,7 @@ export default {
       v-if="showEditor"
       class="design-description-form common-note-form"
       :label="$options.i18n.descriptionLabel"
-      label-class="gl-line-height-20! gl-font-lg!"
+      label-class="!gl-leading-20 gl-font-lg!"
     >
       <div v-if="errorMessage" class="gl-pb-3">
         <gl-alert variant="danger" @dismiss="errorMessage = null">
@@ -220,7 +220,7 @@ export default {
         <div
           class="design-description-header gl-display-flex gl-justify-content-space-between gl-mb-2"
         >
-          <h3 class="gl-line-height-20! gl-font-lg gl-m-0">
+          <h3 class="!gl-leading-20 gl-font-lg gl-m-0">
             {{ $options.i18n.descriptionLabel }}
           </h3>
           <gl-button
diff --git a/app/assets/javascripts/design_management/components/design_sidebar.vue b/app/assets/javascripts/design_management/components/design_sidebar.vue
index e3174a995a4..86e67bd9d2f 100644
--- a/app/assets/javascripts/design_management/components/design_sidebar.vue
+++ b/app/assets/javascripts/design_management/components/design_sidebar.vue
@@ -164,10 +164,7 @@ export default {
           <gl-skeleton-loader />
         </div>
         <template v-else>
-          <h3
-            data-testid="unresolved-discussion-count"
-            class="gl-line-height-20! gl-font-lg gl-my-5"
-          >
+          <h3 data-testid="unresolved-discussion-count" class="!gl-leading-20 gl-font-lg gl-my-5">
             {{ unresolvedDiscussionsCount }}
           </h3>
           <gl-empty-state
diff --git a/app/assets/javascripts/diffs/components/shared/findings_drawer_item.vue b/app/assets/javascripts/diffs/components/shared/findings_drawer_item.vue
index f488e8e3bb1..a0486483ef5 100644
--- a/app/assets/javascripts/diffs/components/shared/findings_drawer_item.vue
+++ b/app/assets/javascripts/diffs/components/shared/findings_drawer_item.vue
@@ -16,7 +16,7 @@ export default {
 </script>
 <template>
   <li class="gl-mb-4">
-    <p class="gl-line-height-20">
+    <p class="gl-leading-20">
       <span
         data-testid="findings-drawer-item-description"
         class="gl-font-weight-bold gl-display-block gl-mb-1"
diff --git a/app/assets/javascripts/environments/components/canary_ingress.vue b/app/assets/javascripts/environments/components/canary_ingress.vue
index 5a28220f0d4..750f1cc7abc 100644
--- a/app/assets/javascripts/environments/components/canary_ingress.vue
+++ b/app/assets/javascripts/environments/components/canary_ingress.vue
@@ -36,7 +36,7 @@ export default {
     label: [
       'gl-font-base',
       'gl-font-weight-normal',
-      'gl-line-height-normal',
+      'gl-leading-normal',
       'gl-shadow-inner-1-gray-200',
       'gl-py-3',
       'gl-px-4',
diff --git a/app/assets/javascripts/environments/environment_details/components/kubernetes/kubernetes_pods.vue b/app/assets/javascripts/environments/environment_details/components/kubernetes/kubernetes_pods.vue
index 8afac231f11..9625c11995f 100644
--- a/app/assets/javascripts/environments/environment_details/components/kubernetes/kubernetes_pods.vue
+++ b/app/assets/javascripts/environments/environment_details/components/kubernetes/kubernetes_pods.vue
@@ -69,6 +69,7 @@ export default {
   data() {
     return {
       error: '',
+      filterOption: '',
     };
   },
   computed: {
@@ -100,6 +101,12 @@ export default {
     podsCount() {
       return this.k8sPods?.length || 0;
     },
+    filteredPods() {
+      if (!this.k8sPods) return [];
+      if (!this.filterOption) return this.k8sPods;
+
+      return this.k8sPods.filter((pod) => pod.status === this.filterOption);
+    },
   },
   methods: {
     countPodsByPhase(phase) {
@@ -116,6 +123,9 @@ export default {
     onRemoveSelection() {
       this.$emit('remove-selection');
     },
+    filterPods(status) {
+      this.filterOption = status;
+    },
   },
   i18n: {
     podsTitle: s__('Environment|Pods'),
@@ -133,10 +143,10 @@ export default {
     <gl-loading-icon v-if="loading" />
 
     <template v-else-if="!error">
-      <workload-stats v-if="podStats" :stats="podStats" class="gl-mt-3" />
+      <workload-stats v-if="podStats" :stats="podStats" class="gl-mt-3" @select="filterPods" />
       <workload-table
         v-if="k8sPods"
-        :items="k8sPods"
+        :items="filteredPods"
         :page-size="$options.PAGE_SIZE"
         class="gl-mt-8"
         @select-item="onItemSelect"
diff --git a/app/assets/javascripts/environments/environment_details/empty_state.vue b/app/assets/javascripts/environments/environment_details/empty_state.vue
index 5fe7e028dce..08927360c43 100644
--- a/app/assets/javascripts/environments/environment_details/empty_state.vue
+++ b/app/assets/javascripts/environments/environment_details/empty_state.vue
@@ -18,7 +18,7 @@ export default {
     :title="$options.translations.emptyStateTitle"
     :primary-button-text="$options.translations.emptyStatePrimaryButton"
     :primary-button-link="$options.actionButtonUrl"
-    class="gl-line-height-20"
+    class="gl-leading-20"
   >
     <template #description>
       <gl-sprintf :message="$options.translations.emptyStateDescription">
diff --git a/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue b/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue
index f46da65c771..5723382cbee 100644
--- a/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue
+++ b/app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue
@@ -204,7 +204,7 @@ export default {
             />
           </div>
         </gl-form-group>
-        <p class="gl-ml-3 gl-align-self-end gl-line-height-32">{{ __('UTC') }}</p>
+        <p class="gl-ml-3 gl-align-self-end gl-leading-32">{{ __('UTC') }}</p>
       </div>
     </div>
     <gl-form-group>
diff --git a/app/assets/javascripts/kubernetes_dashboard/components/workload_details_item.vue b/app/assets/javascripts/kubernetes_dashboard/components/workload_details_item.vue
index d3cd347f63e..d65d7b7f616 100644
--- a/app/assets/javascripts/kubernetes_dashboard/components/workload_details_item.vue
+++ b/app/assets/javascripts/kubernetes_dashboard/components/workload_details_item.vue
@@ -44,7 +44,7 @@ export default {
 </script>
 
 <template>
-  <li class="gl-line-height-20 gl-py-3 gl-border-b-solid gl-border-b-2 gl-border-b-gray-100">
+  <li class="gl-leading-20 gl-py-3 gl-border-b-solid gl-border-b-2 gl-border-b-gray-100">
     <div
       :class="{
         'gl-display-flex gl-flex-wrap gl-justify-content-space-between gl-align-items-center': collapsible,
diff --git a/app/assets/javascripts/kubernetes_dashboard/components/workload_layout.vue b/app/assets/javascripts/kubernetes_dashboard/components/workload_layout.vue
index fb3abc1e461..8d1362dc615 100644
--- a/app/assets/javascripts/kubernetes_dashboard/components/workload_layout.vue
+++ b/app/assets/javascripts/kubernetes_dashboard/components/workload_layout.vue
@@ -44,12 +44,18 @@ export default {
     return {
       showDetailsDrawer: false,
       selectedItem: {},
+      filterOption: '',
     };
   },
   computed: {
     getDrawerHeaderHeight() {
       return getContentWrapperHeight();
     },
+    filteredItems() {
+      if (!this.filterOption) return this.items;
+
+      return this.items.filter((item) => item.status === this.filterOption);
+    },
   },
   methods: {
     closeDetailsDrawer() {
@@ -59,6 +65,9 @@ export default {
       this.selectedItem = item;
       this.showDetailsDrawer = true;
     },
+    filterItems(status) {
+      this.filterOption = status;
+    },
   },
   DRAWER_Z_INDEX,
 };
@@ -69,9 +78,9 @@ export default {
     {{ errorMessage }}
   </gl-alert>
   <div v-else>
-    <workload-stats :stats="stats" />
+    <workload-stats :stats="stats" @select="filterItems" />
     <workload-table
-      :items="items"
+      :items="filteredItems"
       :fields="fields"
       class="gl-mt-8"
       @select-item="onItemSelect"
diff --git a/app/assets/javascripts/kubernetes_dashboard/components/workload_stats.vue b/app/assets/javascripts/kubernetes_dashboard/components/workload_stats.vue
index 9c5429ad106..d7837577a86 100644
--- a/app/assets/javascripts/kubernetes_dashboard/components/workload_stats.vue
+++ b/app/assets/javascripts/kubernetes_dashboard/components/workload_stats.vue
@@ -11,6 +11,22 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      active: '',
+    };
+  },
+  methods: {
+    select(item) {
+      if (item === this.active) {
+        this.active = '';
+      } else {
+        this.active = item;
+      }
+
+      this.$emit('select', this.active);
+    },
+  },
 };
 </script>
 
@@ -19,9 +35,11 @@ export default {
     <gl-single-stat
       v-for="(stat, index) in stats"
       :key="index"
-      class="gl-w-full gl-flex-direction-column gl-align-items-center gl-justify-content-center gl-bg-white gl-border gl-border-gray-a-08 gl-mx-3 gl-p-3 gl-mt-3"
+      class="gl-w-full gl-flex-col gl-items-center gl-justify-center gl-bg-white gl-border gl-border-gray-a-08 gl-mx-3 gl-p-3 gl-mt-3 gl-cursor-pointer"
       :value="stat.value"
       :title="stat.title"
+      :class="{ 'gl-inset-border-b-2-blue-500': active === stat.title }"
+      @click="select(stat.title)"
     />
   </div>
 </template>
diff --git a/app/assets/javascripts/kubernetes_dashboard/components/workload_table.vue b/app/assets/javascripts/kubernetes_dashboard/components/workload_table.vue
index 6533feafa53..46175b9e86c 100644
--- a/app/assets/javascripts/kubernetes_dashboard/components/workload_table.vue
+++ b/app/assets/javascripts/kubernetes_dashboard/components/workload_table.vue
@@ -44,6 +44,11 @@ export default {
       });
     },
   },
+  watch: {
+    items() {
+      this.currentPage = 1;
+    },
+  },
   methods: {
     selectItem(item) {
       const selectedItem = item[0];
diff --git a/app/assets/javascripts/merge_conflicts/merge_conflict_resolver_app.vue b/app/assets/javascripts/merge_conflicts/merge_conflict_resolver_app.vue
index c2765ad6fc0..ad05e349d37 100644
--- a/app/assets/javascripts/merge_conflicts/merge_conflict_resolver_app.vue
+++ b/app/assets/javascripts/merge_conflicts/merge_conflict_resolver_app.vue
@@ -81,7 +81,7 @@ export default {
       {{ conflictsData.errorMessage }}
     </div>
     <template v-if="!isLoading && !hasError">
-      <div class="gl-border-b-0 gl-py-5 gl-line-height-32">
+      <div class="gl-border-b-0 gl-py-5 gl-leading-32">
         <div v-if="fileTextTypePresent" class="gl-float-right">
           <gl-button-group>
             <gl-button :selected="!isParallel" @click="setViewType('inline')">
diff --git a/app/assets/javascripts/merge_requests/components/reviewers/reviewers_container.vue b/app/assets/javascripts/merge_requests/components/reviewers/reviewers_container.vue
index 6353c0e567a..a57fc2726d5 100644
--- a/app/assets/javascripts/merge_requests/components/reviewers/reviewers_container.vue
+++ b/app/assets/javascripts/merge_requests/components/reviewers/reviewers_container.vue
@@ -69,7 +69,7 @@ export default {
         <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-w-20"></div>
         <div class="gl-animate-skeleton-loader gl-h-4 gl-rounded-base gl-w-2 gl-ml-auto"></div>
       </template>
-      <div v-else class="gl-line-height-20 gl-text-gray-900 gl-font-weight-bold">
+      <div v-else class="gl-leading-20 gl-text-gray-900 gl-font-weight-bold">
         {{ reviewersTitle }}
       </div>
     </div>
diff --git a/app/assets/javascripts/organizations/show/components/association_count_card.vue b/app/assets/javascripts/organizations/show/components/association_count_card.vue
index 5ea8701cf9b..f7c6f091d97 100644
--- a/app/assets/javascripts/organizations/show/components/association_count_card.vue
+++ b/app/assets/javascripts/organizations/show/components/association_count_card.vue
@@ -41,7 +41,7 @@ export default {
       <gl-link :href="linkHref">{{ linkText }}</gl-link>
     </div>
     <span
-      class="gl-font-size-h-display gl-font-weight-bold gl-line-height-ratio-1000 gl-mt-2 gl-display-block"
+      class="gl-font-size-h-display gl-font-weight-bold gl-leading-1 gl-mt-2 gl-display-block"
       >{{ count }}</span
     >
   </gl-card>
diff --git a/app/assets/javascripts/packages_and_registries/settings/project/components/expiration_toggle.vue b/app/assets/javascripts/packages_and_registries/settings/project/components/expiration_toggle.vue
index 35fc0910a16..b5bf2e53b06 100644
--- a/app/assets/javascripts/packages_and_registries/settings/project/components/expiration_toggle.vue
+++ b/app/assets/javascripts/packages_and_registries/settings/project/components/expiration_toggle.vue
@@ -53,7 +53,7 @@ export default {
         label-position="hidden"
         :disabled="disabled"
       />
-      <span class="gl-ml-5 gl-line-height-24" data-testid="description">
+      <span class="gl-ml-5 gl-leading-24" data-testid="description">
         <gl-sprintf :message="toggleText">
           <template #strong="{ content }">
             <strong>{{ content }}</strong>
diff --git a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
index 47f048af599..b94b8d38334 100644
--- a/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
+++ b/app/assets/javascripts/pages/projects/shared/permissions/components/settings_panel.vue
@@ -648,7 +648,7 @@ export default {
           <strong class="gl-display-block">{{ s__('ProjectSettings|Additional options') }}</strong>
           <label
             v-if="visibilityLevel !== $options.VISIBILITY_LEVEL_PRIVATE_INTEGER"
-            class="gl-line-height-28 gl-font-weight-normal gl-mb-0"
+            class="gl-leading-28 gl-font-weight-normal gl-mb-0"
           >
             <input
               :value="requestAccessEnabled"
@@ -660,7 +660,7 @@ export default {
           </label>
           <label
             v-if="visibilityLevel !== $options.VISIBILITY_LEVEL_PUBLIC_INTEGER"
-            class="gl-line-height-28 gl-font-weight-normal gl-display-block gl-mb-0"
+            class="gl-leading-28 gl-font-weight-normal gl-display-block gl-mb-0"
           >
             <input
               :value="enforceAuthChecksOnUploads"
diff --git a/app/assets/javascripts/projects/commit/components/commit_options_dropdown.vue b/app/assets/javascripts/projects/commit/components/commit_options_dropdown.vue
index 377310b087e..0efb2cddd58 100644
--- a/app/assets/javascripts/projects/commit/components/commit_options_dropdown.vue
+++ b/app/assets/javascripts/projects/commit/components/commit_options_dropdown.vue
@@ -144,7 +144,7 @@ export default {
     :toggle-text="__('Options')"
     right
     data-testid="commit-options-dropdown"
-    class="gl-line-height-20"
+    class="gl-leading-20"
   >
     <gl-disclosure-dropdown-group :group="optionsGroup" @action="closeDropdown" />
 
diff --git a/app/assets/javascripts/related_issues/components/issue_token.vue b/app/assets/javascripts/related_issues/components/issue_token.vue
index 16116767e1f..cc024f7d445 100644
--- a/app/assets/javascripts/related_issues/components/issue_token.vue
+++ b/app/assets/javascripts/related_issues/components/issue_token.vue
@@ -48,7 +48,7 @@ export default {
 <template>
   <div
     :class="{
-      'issue-token gl-display-inline-flex gl-align-items-stretch gl-max-w-full gl-line-height-24 gl-whitespace-nowrap': isCondensed,
+      'issue-token gl-display-inline-flex gl-align-items-stretch gl-max-w-full gl-leading-24 gl-whitespace-nowrap': isCondensed,
       'flex-row issuable-info-container': !isCondensed,
     }"
   >
diff --git a/app/assets/javascripts/releases/components/release_block_assets.vue b/app/assets/javascripts/releases/components/release_block_assets.vue
index 4824e53d486..2871dfbd52c 100644
--- a/app/assets/javascripts/releases/components/release_block_assets.vue
+++ b/app/assets/javascripts/releases/components/release_block_assets.vue
@@ -126,7 +126,7 @@ export default {
             <li v-for="link in section.links" :key="link.url" class="gl-display-flex">
               <gl-link
                 :href="link.directAssetUrl || link.url"
-                class="gl-display-flex gl-align-items-center gl-line-height-24"
+                class="gl-display-flex gl-align-items-center gl-leading-24"
               >
                 <gl-icon :name="section.iconName" class="gl-mr-2 gl-flex-shrink-0 gl-flex-grow-0" />
                 {{ link.name }}
diff --git a/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue b/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue
index 1cc64d376f5..ed9d313e386 100644
--- a/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/assignee_title.vue
@@ -39,7 +39,7 @@ export default {
 };
 </script>
 <template>
-  <div class="hide-collapsed gl-line-height-20 gl-mb-2 gl-text-gray-900 gl-font-weight-bold">
+  <div class="hide-collapsed gl-leading-20 gl-mb-2 gl-text-gray-900 gl-font-weight-bold">
     {{ assigneeTitle }}
     <gl-loading-icon v-if="loading" size="sm" inline class="align-bottom" />
     <a
diff --git a/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue b/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue
index 9cb8e7c2689..3d78d36b682 100644
--- a/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue
+++ b/app/assets/javascripts/sidebar/components/assignees/uncollapsed_assignee_list.vue
@@ -90,7 +90,7 @@ export default {
           data-css-area="user"
         >
           <div
-            class="gl-ml-3 gl-line-height-normal gl-display-grid gl-align-items-center"
+            class="gl-ml-3 gl-leading-normal gl-display-grid gl-align-items-center"
             data-testid="username"
           >
             <user-name-with-status :name="user.name" :availability="userAvailability(user)" />
diff --git a/app/assets/javascripts/sidebar/components/crm_contacts/crm_contacts.vue b/app/assets/javascripts/sidebar/components/crm_contacts/crm_contacts.vue
index c5b3499b17f..b54b8310fb1 100644
--- a/app/assets/javascripts/sidebar/components/crm_contacts/crm_contacts.vue
+++ b/app/assets/javascripts/sidebar/components/crm_contacts/crm_contacts.vue
@@ -110,7 +110,7 @@ export default {
         ><gl-icon name="question-o" class="gl-text-blue-600"
       /></gl-link>
     </div>
-    <div class="hide-collapsed gl-line-height-20 gl-font-weight-bold">
+    <div class="hide-collapsed gl-leading-20 gl-font-weight-bold">
       {{ contactsLabel }}
     </div>
     <div v-if="shouldShowContacts" class="hide-collapsed gl-display-flex gl-flex-wrap gl-mt-2">
diff --git a/app/assets/javascripts/sidebar/components/date/sidebar_inherit_date.vue b/app/assets/javascripts/sidebar/components/date/sidebar_inherit_date.vue
index 77f8e125dce..a9f1faa99b7 100644
--- a/app/assets/javascripts/sidebar/components/date/sidebar_inherit_date.vue
+++ b/app/assets/javascripts/sidebar/components/date/sidebar_inherit_date.vue
@@ -84,7 +84,7 @@ export default {
         :reset-text="$options.i18n.remove"
         :is-loading="isLoading"
         :can-delete="dateIsFixed && hasFixedDate"
-        class="gl-line-height-normal"
+        class="gl-leading-normal"
         @reset-date="$emit('reset-date', $event)"
       />
     </div>
@@ -105,7 +105,7 @@ export default {
         :reset-text="$options.i18n.remove"
         :is-loading="isLoading"
         :can-delete="false"
-        class="gl-line-height-normal"
+        class="gl-leading-normal"
       />
     </div>
   </div>
diff --git a/app/assets/javascripts/sidebar/components/labels/labels_select_vue/dropdown_title.vue b/app/assets/javascripts/sidebar/components/labels/labels_select_vue/dropdown_title.vue
index 11c8f246a55..3e8c0c97766 100644
--- a/app/assets/javascripts/sidebar/components/labels/labels_select_vue/dropdown_title.vue
+++ b/app/assets/javascripts/sidebar/components/labels/labels_select_vue/dropdown_title.vue
@@ -27,9 +27,7 @@ export default {
 </script>
 
 <template>
-  <div
-    class="hide-collapsed gl-line-height-20 gl-mb-2 gl-text-gray-900 gl-font-weight-bold gl-mb-0"
-  >
+  <div class="hide-collapsed gl-leading-20 gl-mb-2 gl-text-gray-900 gl-font-weight-bold gl-mb-0">
     {{ __('Labels') }}
     <template v-if="allowLabelEdit">
       <gl-loading-icon v-show="labelsSelectInProgress" size="sm" inline />
diff --git a/app/assets/javascripts/sidebar/components/participants/participants.vue b/app/assets/javascripts/sidebar/components/participants/participants.vue
index 6128f52b492..ac8e321c330 100644
--- a/app/assets/javascripts/sidebar/components/participants/participants.vue
+++ b/app/assets/javascripts/sidebar/components/participants/participants.vue
@@ -93,7 +93,7 @@ export default {
   <div>
     <div
       v-if="showParticipantLabel"
-      class="gl-display-flex gl-align-items-center gl-line-height-24 gl-text-gray-900 gl-font-weight-bold gl-mb-2 gl-gap-2"
+      class="gl-display-flex gl-align-items-center gl-leading-24 gl-text-gray-900 gl-font-weight-bold gl-mb-2 gl-gap-2"
     >
       {{ participantLabel }}
       <gl-loading-icon v-if="loading" inline />
diff --git a/app/assets/javascripts/sidebar/components/reviewers/reviewer_title.vue b/app/assets/javascripts/sidebar/components/reviewers/reviewer_title.vue
index c78eb9a6b2d..b3bcaa7b301 100644
--- a/app/assets/javascripts/sidebar/components/reviewers/reviewer_title.vue
+++ b/app/assets/javascripts/sidebar/components/reviewers/reviewer_title.vue
@@ -54,7 +54,7 @@ export default {
 </script>
 <template>
   <div
-    class="hide-collapsed gl-display-flex gl-align-items-center gl-line-height-20 gl-text-gray-900 gl-font-weight-bold gl-gap-2"
+    class="hide-collapsed gl-display-flex gl-align-items-center gl-leading-20 gl-text-gray-900 gl-font-weight-bold gl-gap-2"
   >
     {{ reviewerTitle }}
     <gl-loading-icon v-if="loading" size="sm" inline class="align-bottom" />
diff --git a/app/assets/javascripts/sidebar/components/reviewers/reviewers.vue b/app/assets/javascripts/sidebar/components/reviewers/reviewers.vue
index 9b6a0ac522f..37f8c30dbb3 100644
--- a/app/assets/javascripts/sidebar/components/reviewers/reviewers.vue
+++ b/app/assets/javascripts/sidebar/components/reviewers/reviewers.vue
@@ -60,7 +60,7 @@ export default {
     <div class="value hide-collapsed">
       <span
         v-if="hasNoUsers"
-        class="no-value gl-display-flex gl-font-base gl-line-height-normal"
+        class="no-value gl-display-flex gl-font-base gl-leading-normal"
         data-testid="no-value"
       >
         {{ __('None') }}
diff --git a/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue b/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue
index 80e17b678f1..c2ccbe5b9e7 100644
--- a/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue
+++ b/app/assets/javascripts/sidebar/components/reviewers/uncollapsed_reviewer_list.vue
@@ -165,7 +165,7 @@ export default {
         class="gl-break-anywhere gl-mr-2"
         data-css-area="user"
       >
-        <div class="gl-ml-3 gl-line-height-normal gl-display-grid gl-align-items-center">
+        <div class="gl-ml-3 gl-leading-normal gl-display-grid gl-align-items-center">
           {{ user.name }}
         </div>
       </reviewer-avatar-link>
diff --git a/app/assets/javascripts/sidebar/components/sidebar_editable_item.vue b/app/assets/javascripts/sidebar/components/sidebar_editable_item.vue
index aec49d56de9..1156526edeb 100644
--- a/app/assets/javascripts/sidebar/components/sidebar_editable_item.vue
+++ b/app/assets/javascripts/sidebar/components/sidebar_editable_item.vue
@@ -154,7 +154,7 @@ export default {
 <template>
   <div>
     <div
-      class="gl-display-flex gl-align-items-center gl-line-height-20 gl-text-gray-900 gl-font-weight-bold"
+      class="gl-display-flex gl-align-items-center gl-leading-20 gl-text-gray-900 gl-font-weight-bold"
       @click.self="collapse"
     >
       <span class="hide-collapsed" data-testid="title" @click="collapse">
diff --git a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
index f6cd42b8a20..a2eaf43b49d 100644
--- a/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
+++ b/app/assets/javascripts/sidebar/components/time_tracking/time_tracker.vue
@@ -235,7 +235,7 @@ export default {
       :time-estimate-human-readable="humanTimeEstimate"
     />
     <div
-      class="hide-collapsed gl-line-height-20 gl-text-gray-900 gl-display-flex gl-align-items-center gl-font-weight-bold"
+      class="hide-collapsed gl-leading-20 gl-text-gray-900 gl-display-flex gl-align-items-center gl-font-weight-bold"
     >
       {{ __('Time tracking') }}
       <gl-loading-icon v-if="isTimeTrackingInfoLoading" size="sm" class="gl-ml-2" inline />
diff --git a/app/assets/javascripts/snippets/components/snippet_header.vue b/app/assets/javascripts/snippets/components/snippet_header.vue
index 3ee0a582df7..4c3f02b5600 100644
--- a/app/assets/javascripts/snippets/components/snippet_header.vue
+++ b/app/assets/javascripts/snippets/components/snippet_header.vue
@@ -259,7 +259,7 @@ export default {
     >
       <span
         v-if="snippet.hidden"
-        class="gl-bg-orange-50 gl-text-orange-600 gl-h-6 gl-w-6 gl-rounded-base gl-line-height-24 gl-text-center gl-mt-2"
+        class="gl-bg-orange-50 gl-text-orange-600 gl-h-6 gl-w-6 gl-rounded-base gl-leading-24 gl-text-center gl-mt-2"
       >
         <gl-icon
           v-gl-tooltip.bottom
@@ -366,7 +366,7 @@ export default {
           class="gl-mr-2"
         />
 
-        <div data-testid="authored-message" class="gl-line-height-20">
+        <div data-testid="authored-message" class="gl-leading-20">
           <gl-sprintf :message="authoredMessage">
             <template #timeago>
               <time-ago-tooltip
diff --git a/app/assets/javascripts/super_sidebar/components/counter.vue b/app/assets/javascripts/super_sidebar/components/counter.vue
index 267f9d4321b..11bda7a1127 100644
--- a/app/assets/javascripts/super_sidebar/components/counter.vue
+++ b/app/assets/javascripts/super_sidebar/components/counter.vue
@@ -48,7 +48,7 @@ export default {
     :is="component"
     :aria-label="ariaLabel"
     :href="href"
-    class="user-bar-button gl-display-block gl-flex-grow-1 gl-text-center gl-py-3 gl-rounded-base gl-border-none gl-line-height-1 gl-font-sm gl-hover-text-decoration-none"
+    class="user-bar-button gl-display-block gl-flex-grow-1 gl-text-center gl-py-3 gl-rounded-base gl-border-none gl-leading-1 gl-font-sm gl-hover-text-decoration-none"
   >
     <gl-icon aria-hidden="true" :name="icon" />
     <span v-if="count" aria-hidden="true" class="gl-ml-1">{{ formattedCount }}</span>
diff --git a/app/assets/javascripts/super_sidebar/components/help_center.vue b/app/assets/javascripts/super_sidebar/components/help_center.vue
index 399cf4e12c5..614b28358c4 100644
--- a/app/assets/javascripts/super_sidebar/components/help_center.vue
+++ b/app/assets/javascripts/super_sidebar/components/help_center.vue
@@ -233,7 +233,7 @@ export default {
       :group="itemGroups.versionCheck"
     >
       <template #list-item="{ item }">
-        <span class="gl-display-flex gl-flex-direction-column gl-line-height-24">
+        <span class="gl-display-flex gl-flex-direction-column gl-leading-24">
           <span class="gl-font-sm gl-font-weight-bold">
             {{ item.text }}
             <gl-emoji data-name="rocket" />
diff --git a/app/assets/javascripts/super_sidebar/components/nav_item.vue b/app/assets/javascripts/super_sidebar/components/nav_item.vue
index 50e2ecaf0fe..ea63738146d 100644
--- a/app/assets/javascripts/super_sidebar/components/nav_item.vue
+++ b/app/assets/javascripts/super_sidebar/components/nav_item.vue
@@ -132,7 +132,7 @@ export default {
     },
     computedLinkClasses() {
       return {
-        'gl-px-2 gl-mx-2 gl-line-height-normal': this.isSubitem,
+        'gl-px-2 gl-mx-2 gl-leading-normal': this.isSubitem,
         'gl-px-3': !this.isSubitem,
         'gl-pl-5! gl-rounded-small': this.isFlyout,
         'gl-rounded-base': !this.isFlyout,
diff --git a/app/assets/javascripts/super_sidebar/components/organization_switcher.vue b/app/assets/javascripts/super_sidebar/components/organization_switcher.vue
index 040e2bf61cb..e0c1e088178 100644
--- a/app/assets/javascripts/super_sidebar/components/organization_switcher.vue
+++ b/app/assets/javascripts/super_sidebar/components/organization_switcher.vue
@@ -140,7 +140,7 @@ export default {
   >
     <template #toggle>
       <button
-        class="organization-switcher-button gl-display-flex gl-align-items-center gl-gap-3 gl-p-3 gl-rounded-base gl-border-none gl-line-height-1 gl-w-full"
+        class="organization-switcher-button gl-display-flex gl-align-items-center gl-gap-3 gl-p-3 gl-rounded-base gl-border-none gl-leading-1 gl-w-full"
         data-testid="toggle-button"
       >
         <gl-avatar
diff --git a/app/assets/javascripts/super_sidebar/components/super_sidebar.vue b/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
index 498b3d6b048..f5fad09a099 100644
--- a/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
+++ b/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
@@ -231,13 +231,13 @@ export default {
       <user-bar ref="userBar" :has-collapse-button="!showOverlay" :sidebar-data="sidebarData" />
       <div v-if="showTrialStatusWidget" class="gl-px-2 gl-py-2">
         <trial-status-widget
-          class="super-sidebar-nav-item gl-rounded-base gl-relative gl-display-flex gl-align-items-center gl-mb-1 gl-px-3 gl-line-height-normal gl-text-black-normal! gl-text-decoration-none! gl-py-3"
+          class="super-sidebar-nav-item gl-rounded-base gl-relative gl-display-flex gl-align-items-center gl-mb-1 gl-px-3 gl-leading-normal gl-text-black-normal! gl-text-decoration-none! gl-py-3"
         />
         <trial-status-popover />
       </div>
       <div v-else-if="showDuoProTrialStatusWidget" class="gl-px-2 gl-py-2">
         <duo-pro-trial-status-widget
-          class="super-sidebar-nav-item gl-rounded-base gl-relative gl-display-flex gl-align-items-center gl-mb-1 gl-px-3 gl-line-height-normal gl-text-black-normal! gl-text-decoration-none! gl-py-3"
+          class="super-sidebar-nav-item gl-rounded-base gl-relative gl-display-flex gl-align-items-center gl-mb-1 gl-px-3 gl-leading-normal gl-text-black-normal! gl-text-decoration-none! gl-py-3"
         />
         <duo-pro-trial-status-popover />
       </div>
diff --git a/app/assets/javascripts/super_sidebar/components/user_bar.vue b/app/assets/javascripts/super_sidebar/components/user_bar.vue
index d7c8bfddc21..af405812711 100644
--- a/app/assets/javascripts/super_sidebar/components/user_bar.vue
+++ b/app/assets/javascripts/super_sidebar/components/user_bar.vue
@@ -208,7 +208,7 @@ export default {
       id="super-sidebar-search"
       v-gl-tooltip.bottom.html="searchTooltip"
       v-gl-modal="$options.SEARCH_MODAL_ID"
-      class="user-bar-button gl-display-block gl-py-3 gl-bg-gray-10 gl-rounded-base gl-text-gray-900 gl-border-none gl-line-height-1 gl-w-full"
+      class="user-bar-button gl-display-block gl-py-3 gl-bg-gray-10 gl-rounded-base gl-text-gray-900 gl-border-none gl-leading-1 gl-w-full"
       data-testid="super-sidebar-search-button"
       @click="trackEvent('click_search_button_to_activate_command_palette')"
     >
diff --git a/app/assets/javascripts/usage_quotas/storage/components/storage_usage_overview_card.vue b/app/assets/javascripts/usage_quotas/storage/components/storage_usage_overview_card.vue
index 6e73fc0ba69..3a9b7f2b6f7 100644
--- a/app/assets/javascripts/usage_quotas/storage/components/storage_usage_overview_card.vue
+++ b/app/assets/javascripts/usage_quotas/storage/components/storage_usage_overview_card.vue
@@ -35,7 +35,7 @@ export default {
       <div class="gl-font-weight-bold" data-testid="namespace-storage-card-title">
         {{ s__('UsageQuota|Namespace storage used') }}
       </div>
-      <div class="gl-font-size-h-display gl-font-weight-bold gl-line-height-ratio-1000 gl-my-3">
+      <div class="gl-font-size-h-display gl-font-weight-bold gl-leading-1 gl-my-3">
         <number-to-human-size label-class="gl-font-lg" :value="Number(usedStorage)" plain-zero />
       </div>
       <hr class="gl-my-4" />
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_list.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_list.vue
index 8848cc72be3..4ccafaa761b 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_list.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_list.vue
@@ -41,7 +41,7 @@ export default {
 <template>
   <mr-collapsible-extension v-if="showCollapsedDeployments" :title="__('View all environments.')">
     <template #header>
-      <div class="gl-mr-3 gl-line-height-normal">
+      <div class="gl-mr-3 gl-leading-normal">
         <gl-sprintf :message="multipleDeploymentsTitle">
           <template #deployments>
             <span class="gl-font-weight-bold gl-mr-2">{{ deployments.length }}</span>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue
index b09798a72ec..cbd095c0a0c 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue
@@ -48,7 +48,7 @@ export default {
     <div class="d-flex gl-align-items-center pl-3 gl-py-3">
       <div v-if="hasError" class="ci-widget media">
         <div class="media-body">
-          <span class="gl-font-sm gl-ml-7 gl-line-height-24 js-error-state">
+          <span class="gl-font-sm gl-ml-7 gl-leading-24 js-error-state">
             {{ title }}
           </span>
         </div>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/state_container.vue b/app/assets/javascripts/vue_merge_request_widget/components/state_container.vue
index c8e22afc11e..1d10a2fc006 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/state_container.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/state_container.vue
@@ -100,7 +100,7 @@ export default {
             'gl-display-flex gl-align-items-center': actions.length,
             'gl-md-display-flex gl-align-items-center gl-flex-wrap gl-gap-3': !actions.length,
           }"
-          class="media-body gl-line-height-normal"
+          class="media-body gl-leading-normal"
         >
           <slot></slot>
           <div
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
index 7a87245887d..405babbd095 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
@@ -772,7 +772,7 @@ export default {
                 {{ __('Merge details') }}
               </p>
               <ul class="gl-pl-4 gl-mb-0 gl-ml-3 gl-text-gray-600">
-                <li v-if="sourceHasDivergedFromTarget" class="gl-line-height-normal">
+                <li v-if="sourceHasDivergedFromTarget" class="gl-leading-normal">
                   <gl-sprintf :message="$options.i18n.sourceDivergedFromTargetText">
                     <template #link>
                       <gl-link :href="mr.targetBranchPath">{{
@@ -781,7 +781,7 @@ export default {
                     </template>
                   </gl-sprintf>
                 </li>
-                <li class="gl-line-height-normal">
+                <li class="gl-leading-normal">
                   <added-commit-message
                     :state="mr.state"
                     :merge-commit-sha="mr.shortMergeCommitSha"
@@ -794,12 +794,12 @@ export default {
                 </li>
                 <li
                   v-if="isNotClosed"
-                  class="gl-line-height-normal"
+                  class="gl-leading-normal"
                   data-testid="source-branch-deleted-text"
                 >
                   {{ sourceBranchDeletedText }}
                 </li>
-                <li v-if="mr.relatedLinks" class="gl-line-height-normal">
+                <li v-if="mr.relatedLinks" class="gl-leading-normal">
                   <related-links
                     :state="mr.state"
                     :related-links="mr.relatedLinks"
@@ -807,7 +807,7 @@ export default {
                     class="mr-ready-merge-related-links gl-display-inline"
                   />
                 </li>
-                <li v-if="state.autoMergeEnabled" class="gl-line-height-normal">
+                <li v-if="state.autoMergeEnabled" class="gl-leading-normal">
                   {{ s__('mrWidget|Auto-merge enabled') }}
                 </li>
               </ul>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue
index f1bd5bb25bb..7ad747a66cf 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/squash_before_merge.vue
@@ -57,7 +57,7 @@ export default {
       v-gl-tooltip
       :href="helpPath"
       :title="$options.i18n.helpLabel"
-      class="gl-text-blue-600 gl-line-height-1"
+      class="gl-text-blue-600 gl-leading-1"
       target="_blank"
     >
       <gl-icon name="question-o" />
diff --git a/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue b/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue
index f89109e3c06..f4fb956a759 100644
--- a/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue
+++ b/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_assignees.vue
@@ -217,7 +217,7 @@ export default {
 
     <div v-else>
       <p
-        class="gl-text-gray-900 gl-mb-2 gl-line-height-20 gl-display-flex gl-justify-content-space-between"
+        class="gl-text-gray-900 gl-mb-2 gl-leading-20 gl-display-flex gl-justify-content-space-between"
       >
         {{ __('Assignee') }}
         <gl-button
@@ -293,7 +293,7 @@ export default {
           <span class="dropdown-menu-user-username">@{{ userName }}</span>
         </span>
       </div>
-      <span v-else class="gl-display-flex gl-align-items-center gl-line-height-normal">
+      <span v-else class="gl-display-flex gl-align-items-center gl-leading-normal">
         {{ __('None') }} -
         <gl-button
           class="gl-ml-2 gl-reset-color!"
diff --git a/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_status.vue b/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_status.vue
index 7b099516c5b..ee8b5d6568b 100644
--- a/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_status.vue
+++ b/app/assets/javascripts/vue_shared/alert_details/components/sidebar/sidebar_status.vue
@@ -95,7 +95,7 @@ export default {
 
     <div v-else>
       <p
-        class="gl-text-gray-900 gl-mb-2 gl-line-height-20 gl-display-flex gl-justify-content-space-between"
+        class="gl-text-gray-900 gl-mb-2 gl-leading-20 gl-display-flex gl-justify-content-space-between"
       >
         {{ s__('AlertManagement|Status') }}
         <gl-button
diff --git a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
index 051f4ecce97..0eb34343de2 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/toolbar.vue
@@ -75,7 +75,7 @@ export default {
       @switch="$emit('enableContentEditor')"
     />
     <div class="gl-display-flex">
-      <div v-if="canAttachFile" class="uploading-container gl-font-sm gl-line-height-32 gl-mr-3">
+      <div v-if="canAttachFile" class="uploading-container gl-font-sm gl-leading-32 gl-mr-3">
         <span class="uploading-progress-container hide">
           <gl-icon name="paperclip" />
           <span class="attaching-file-message"></span>
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue
index 607fa0a6187..b77f4193e4c 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue
@@ -52,7 +52,7 @@ export default {
     </div>
 
     <pre
-      class="gl-p-0! gl-w-full gl-overflow-visible! gl-border-none! code highlight gl-line-height-0"
+      class="gl-p-0! gl-w-full gl-overflow-visible! gl-border-none! code highlight gl-leading-0"
     ><code><span :id="`LC${number}`" v-safe-html="content" :lang="language" class="line" data-testid="content"></span></code></pre>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_new.vue b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_new.vue
index dd11837ba63..da9fac2a89e 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_new.vue
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_new.vue
@@ -113,7 +113,7 @@ export default {
 
     <gl-intersection-observer class="gl-w-full" @appear="handleChunkAppear">
       <pre
-        class="gl-m-0 gl-p-0! gl-w-full gl-overflow-visible! gl-border-none! code highlight gl-line-height-0"
+        class="gl-m-0 gl-p-0! gl-w-full gl-overflow-visible! gl-border-none! code highlight gl-leading-0"
       ><code v-if="shouldHighlight" v-safe-html="highlightedContent" :style="codeStyling" data-testid="content"></code><code v-else v-once class="line gl-white-space-pre-wrap! gl-ml-1" data-testid="content" v-text="rawContent"></code></pre>
     </gl-intersection-observer>
   </div>
diff --git a/app/assets/javascripts/vue_shared/components/upload_dropzone/avatar_upload_dropzone.vue b/app/assets/javascripts/vue_shared/components/upload_dropzone/avatar_upload_dropzone.vue
index 211335ef1d7..f43f0960fec 100644
--- a/app/assets/javascripts/vue_shared/components/upload_dropzone/avatar_upload_dropzone.vue
+++ b/app/assets/javascripts/vue_shared/components/upload_dropzone/avatar_upload_dropzone.vue
@@ -86,7 +86,7 @@ export default {
       :src="avatarSrc"
     />
     <div class="gl-min-w-0">
-      <p class="gl-font-weight-bold gl-line-height-1 gl-mb-3">
+      <p class="gl-font-weight-bold gl-leading-1 gl-mb-3">
         {{ label }}
       </p>
       <div v-if="value" class="gl-display-flex gl-align-items-center gl-gap-x-3">
diff --git a/app/assets/javascripts/vue_shared/security_configuration/components/section_layout.vue b/app/assets/javascripts/vue_shared/security_configuration/components/section_layout.vue
index 6045d75ac11..32470172bf8 100644
--- a/app/assets/javascripts/vue_shared/security_configuration/components/section_layout.vue
+++ b/app/assets/javascripts/vue_shared/security_configuration/components/section_layout.vue
@@ -21,7 +21,7 @@ export default {
 </script>
 
 <template>
-  <div class="row gl-m-0 gl-border-b gl-line-height-20 gl-py-6">
+  <div class="row gl-m-0 gl-border-b gl-leading-20 gl-py-6">
     <div class="col-lg-4 gl-pl-0 gl-pr-9">
       <h2 class="gl-font-size-h2 gl-mt-0">{{ heading }}</h2>
       <slot name="description"></slot>
diff --git a/app/assets/javascripts/whats_new/components/feature.vue b/app/assets/javascripts/whats_new/components/feature.vue
index c3e1e2a8fbc..3fb5ec7e00a 100644
--- a/app/assets/javascripts/whats_new/components/feature.vue
+++ b/app/assets/javascripts/whats_new/components/feature.vue
@@ -79,7 +79,7 @@ export default {
     </div>
     <div
       v-safe-html:[$options.safeHtmlConfig]="feature.description"
-      class="gl-pt-3 gl-line-height-20"
+      class="gl-pt-3 gl-leading-20"
     ></div>
     <gl-button
       :href="feature.documentation_link"
diff --git a/app/assets/javascripts/work_items/components/design_management/design_preview/design_description.vue b/app/assets/javascripts/work_items/components/design_management/design_preview/design_description.vue
index 41c78fe334c..876e607f36e 100644
--- a/app/assets/javascripts/work_items/components/design_management/design_preview/design_description.vue
+++ b/app/assets/javascripts/work_items/components/design_management/design_preview/design_description.vue
@@ -22,7 +22,7 @@ export default {
   <div class="design-description-container">
     <div class="design-description-view">
       <div class="design-description-header gl-flex gl-justify-between gl-mb-2">
-        <h3 class="gl-line-height-20! gl-font-lg gl-m-0">
+        <h3 class="!gl-leading-20 gl-font-lg gl-m-0">
           {{ $options.i18n.descriptionLabel }}
         </h3>
       </div>
diff --git a/app/assets/javascripts/work_items/components/shared/work_item_link_child_metadata.vue b/app/assets/javascripts/work_items/components/shared/work_item_link_child_metadata.vue
index 184a4d373fe..922f967e7f4 100644
--- a/app/assets/javascripts/work_items/components/shared/work_item_link_child_metadata.vue
+++ b/app/assets/javascripts/work_items/components/shared/work_item_link_child_metadata.vue
@@ -42,7 +42,7 @@ export default {
       <item-milestone
         v-if="milestone"
         :milestone="milestone"
-        class="gl-display-flex gl-align-items-center gl-max-w-15 gl-font-sm gl-line-height-normal gl-text-gray-900! gl-cursor-help! gl-text-decoration-none!"
+        class="gl-display-flex gl-align-items-center gl-max-w-15 gl-font-sm gl-leading-normal gl-text-gray-900! gl-cursor-help! gl-text-decoration-none!"
       />
       <slot name="left-metadata"></slot>
     </div>
diff --git a/app/assets/javascripts/work_items_hierarchy/components/hierarchy.vue b/app/assets/javascripts/work_items_hierarchy/components/hierarchy.vue
index 48ca27e2922..ef4f8ac5c3b 100644
--- a/app/assets/javascripts/work_items_hierarchy/components/hierarchy.vue
+++ b/app/assets/javascripts/work_items_hierarchy/components/hierarchy.vue
@@ -42,7 +42,7 @@ export default {
       :class="{ flex: !workItem.available }"
     >
       <span
-        class="gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-base gl-pl-2 gl-pt-2 gl-pb-2 gl-pr-3 gl-display-inline-flex gl-align-items-center gl-justify-content-center gl-line-height-normal"
+        class="gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-base gl-pl-2 gl-pt-2 gl-pb-2 gl-pr-3 gl-display-inline-flex gl-align-items-center gl-justify-content-center gl-leading-normal"
         data-testid="work-item-wrapper"
       >
         <span
@@ -98,7 +98,7 @@ export default {
           />
           <span
             :key="nestedWorkItem.id"
-            class="gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-base gl-pl-2 gl-pt-2 gl-pb-2 gl-pr-3 gl-display-inline-flex gl-align-items-center gl-justify-content-center gl-mt-2 gl-line-height-normal"
+            class="gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-base gl-pl-2 gl-pt-2 gl-pb-2 gl-pr-3 gl-display-inline-flex gl-align-items-center gl-justify-content-center gl-mt-2 gl-leading-normal"
             :class="nestedWorkItemTypeMargin(index, workItem)"
           >
             <span
diff --git a/app/components/pajamas/empty_state_component.html.haml b/app/components/pajamas/empty_state_component.html.haml
index b87f41c57d8..cfcf0fddad7 100644
--- a/app/components/pajamas/empty_state_component.html.haml
+++ b/app/components/pajamas/empty_state_component.html.haml
@@ -9,7 +9,7 @@
   - content_wrapper_class = @compact ? 'gl-flex-grow-1 gl-flex-basis-0 gl-px-4' : 'gl-m-auto gl-p-5'
   .gl-empty-state-content.gl-mx-auto.gl-my-0{ class: content_wrapper_class }
     - title_class = @compact ? 'h5' : 'h4'
-    %h1.gl-font-size-h-display.gl-line-height-36.gl-mt-0.gl-mb-0{ class: title_class }
+    %h1.gl-font-size-h-display.gl-leading-36.gl-mt-0.gl-mb-0{ class: title_class }
       = @title
 
     - if description?
diff --git a/app/components/pajamas/single_stat_component.html.haml b/app/components/pajamas/single_stat_component.html.haml
index 2ef1536aad0..e5ca68beb3a 100644
--- a/app/components/pajamas/single_stat_component.html.haml
+++ b/app/components/pajamas/single_stat_component.html.haml
@@ -5,7 +5,7 @@
     %span.gl-font-base.gl-font-weight-normal{ data: { testid: 'title-text' } }
       = title || @title
   .gl-single-stat-content.gl-display-flex.gl-align-items-baseline.gl-font-weight-bold.gl-text-gray-900
-    %span.gl-single-stat-number.gl-line-height-1{ class: unit_class, data: { testid: 'displayValue' } }
+    %span.gl-single-stat-number.gl-leading-1{ class: unit_class, data: { testid: 'displayValue' } }
       %span{ data: { testid: @stat_value_testid } }
         = stat_value || @stat_value
     - if unit?
diff --git a/app/helpers/events_helper.rb b/app/helpers/events_helper.rb
index e6f2f0fd886..325bc6429f2 100644
--- a/app/helpers/events_helper.rb
+++ b/app/helpers/events_helper.rb
@@ -308,7 +308,7 @@ module EventsHelper
   def icon_for_profile_event(event)
     base_class = 'system-note-image'
 
-    classes = current_path?('users#activity') ? "#{event.action_name.parameterize}-icon gl-rounded-full gl-bg-gray-50 gl-line-height-0" : "user-avatar"
+    classes = current_path?('users#activity') ? "#{event.action_name.parameterize}-icon gl-rounded-full gl-bg-gray-50 gl-leading-0" : "user-avatar"
     content = current_path?('users#activity') ? icon_for_event(event.action_name, size: 14) : author_avatar(event, size: 32, css_class: 'gl-display-inline-block', project: event.project)
 
     tag.div(class: "#{base_class} #{classes}") { content }
diff --git a/app/serializers/analytics/cycle_analytics/stage_entity.rb b/app/serializers/analytics/cycle_analytics/stage_entity.rb
index ef88e1da7b0..c9ab6354570 100644
--- a/app/serializers/analytics/cycle_analytics/stage_entity.rb
+++ b/app/serializers/analytics/cycle_analytics/stage_entity.rb
@@ -16,22 +16,22 @@ module Analytics
 
       # new API
       expose :start_event do
-        expose :start_event_identifier, as: :identifier, if: -> (s) { s.custom? }
-        expose :start_event_label, as: :label, using: LabelEntity, if: -> (s) { s.start_event_label_based? }
+        expose :start_event_identifier, as: :identifier, if: ->(s) { s.custom? }
+        expose :start_event_label, as: :label, using: LabelEntity, if: ->(s) { s.start_event_label_based? }
         expose :start_event_html_description, as: :html_description
       end
 
       expose :end_event do
-        expose :end_event_identifier, as: :identifier, if: -> (s) { s.custom? }
-        expose :end_event_label, as: :label, using: LabelEntity, if: -> (s) { s.end_event_label_based? }
+        expose :end_event_identifier, as: :identifier, if: ->(s) { s.custom? }
+        expose :end_event_label, as: :label, using: LabelEntity, if: ->(s) { s.end_event_label_based? }
         expose :end_event_html_description, as: :html_description
       end
 
       # old API
-      expose :start_event_identifier, if: -> (s) { s.custom? }
-      expose :end_event_identifier, if: -> (s) { s.custom? }
-      expose :start_event_label, using: LabelEntity, if: -> (s) { s.start_event_label_based? }
-      expose :end_event_label, using: LabelEntity, if: -> (s) { s.end_event_label_based? }
+      expose :start_event_identifier, if: ->(s) { s.custom? }
+      expose :end_event_identifier, if: ->(s) { s.custom? }
+      expose :start_event_label, using: LabelEntity, if: ->(s) { s.start_event_label_based? }
+      expose :end_event_label, using: LabelEntity, if: ->(s) { s.end_event_label_based? }
       expose :start_event_html_description
       expose :end_event_html_description
 
diff --git a/app/serializers/base_discussion_entity.rb b/app/serializers/base_discussion_entity.rb
index 0b006078343..756aa385bc3 100644
--- a/app/serializers/base_discussion_entity.rb
+++ b/app/serializers/base_discussion_entity.rb
@@ -16,15 +16,15 @@ class BaseDiscussionEntity < Grape::Entity
   expose :individual_note?, as: :individual_note
   expose :resolvable?, as: :resolvable
 
-  expose :truncated_diff_lines, using: DiffLineEntity, if: -> (d, _) { d.diff_discussion? && d.on_text? && (d.expanded? || render_truncated_diff_lines?) }
+  expose :truncated_diff_lines, using: DiffLineEntity, if: ->(d, _) { d.diff_discussion? && d.on_text? && (d.expanded? || render_truncated_diff_lines?) }
 
-  with_options if: -> (d, _) { d.diff_discussion? } do
+  with_options if: ->(d, _) { d.diff_discussion? } do
     expose :active?, as: :active
     expose :line_code
     expose :diff_file, using: DiscussionDiffFileEntity
   end
 
-  with_options if: -> (d, _) { d.diff_discussion? && !d.legacy_diff_discussion? } do
+  with_options if: ->(d, _) { d.diff_discussion? && !d.legacy_diff_discussion? } do
     expose :position
     expose :original_position
   end
@@ -33,7 +33,7 @@ class BaseDiscussionEntity < Grape::Entity
     discussion_path(discussion)
   end
 
-  with_options if: -> (d, _) { d.noteable.supports_resolvable_notes? } do
+  with_options if: ->(d, _) { d.noteable.supports_resolvable_notes? } do
     expose :resolved?, as: :resolved
     expose :resolved_by_push?, as: :resolved_by_push
     expose :resolved_by, using: NoteUserEntity
@@ -43,12 +43,12 @@ class BaseDiscussionEntity < Grape::Entity
       resolve_project_discussion_path(discussion.project, discussion.noteable_collection_name, discussion.noteable, discussion.id)
     end
 
-    expose :resolve_with_issue_path, if: -> (d, _) { d.noteable.is_a?(MergeRequest) } do |discussion|
+    expose :resolve_with_issue_path, if: ->(d, _) { d.noteable.is_a?(MergeRequest) } do |discussion|
       new_project_issue_path(discussion.project, merge_request_to_resolve_discussions_of: discussion.noteable.iid, discussion_to_resolve: discussion.id) if discussion&.project&.issues_enabled?
     end
   end
 
-  expose :truncated_diff_lines_path, if: -> (d, _) { !d.expanded? && !render_truncated_diff_lines? } do |discussion|
+  expose :truncated_diff_lines_path, if: ->(d, _) { !d.expanded? && !render_truncated_diff_lines? } do |discussion|
     project_discussion_path(discussion.project, discussion.noteable_collection_name, discussion.noteable, discussion)
   end
 
diff --git a/app/serializers/blob_entity.rb b/app/serializers/blob_entity.rb
index 6dde35a9415..f0dc10bcc95 100644
--- a/app/serializers/blob_entity.rb
+++ b/app/serializers/blob_entity.rb
@@ -11,7 +11,7 @@ class BlobEntity < Grape::Entity
     IconsHelper.file_type_icon_class('file', blob.mode, blob.name)
   end
 
-  expose :url, if: -> (*) { request.respond_to?(:ref) } do |blob|
+  expose :url, if: ->(*) { request.respond_to?(:ref) } do |blob|
     project_blob_path(request.project, File.join(request.ref, blob.path))
   end
 end
diff --git a/app/serializers/build_action_entity.rb b/app/serializers/build_action_entity.rb
index 95833c3528f..6019a96924f 100644
--- a/app/serializers/build_action_entity.rb
+++ b/app/serializers/build_action_entity.rb
@@ -13,9 +13,9 @@ class BuildActionEntity < Grape::Entity
 
   expose :playable?, as: :playable
   expose :scheduled?, as: :scheduled
-  expose :scheduled_at, if: -> (*) { scheduled? }
+  expose :scheduled_at, if: ->(*) { scheduled? }
 
-  expose :unschedule_path, if: -> (build) { build.scheduled? } do |build|
+  expose :unschedule_path, if: ->(build) { build.scheduled? } do |build|
     unschedule_project_job_path(build.project, build)
   end
 
diff --git a/app/serializers/build_details_entity.rb b/app/serializers/build_details_entity.rb
index e166119f59d..55e13e8740a 100644
--- a/app/serializers/build_details_entity.rb
+++ b/app/serializers/build_details_entity.rb
@@ -11,7 +11,7 @@ class BuildDetailsEntity < Ci::JobEntity
   expose :metadata, using: BuildMetadataEntity
   expose :pipeline, using: Ci::PipelineEntity
 
-  expose :deployment_status, if: -> (*) { build.deployment_job? } do
+  expose :deployment_status, if: ->(*) { build.deployment_job? } do
     expose :deployment_status, as: :status
     expose :persisted_environment, as: :environment do |build, options|
       options.merge(deployment_details: false).then do |opts|
@@ -20,30 +20,30 @@ class BuildDetailsEntity < Ci::JobEntity
     end
   end
 
-  expose :deployment_cluster, if: -> (build) { build&.deployment&.cluster } do |build, options|
+  expose :deployment_cluster, if: ->(build) { build&.deployment&.cluster } do |build, options|
     # Until data is copied over from deployments.cluster_id, this entity must represent Deployment instead of DeploymentCluster
     # https://gitlab.com/gitlab-org/gitlab/issues/202628
     DeploymentClusterEntity.represent(build.deployment, options)
   end
 
-  expose :artifact, if: -> (*) { can?(current_user, :read_job_artifacts, build) } do
-    expose :download_path, if: -> (*) { build.locked_artifacts? || build.artifacts? } do |build|
+  expose :artifact, if: ->(*) { can?(current_user, :read_job_artifacts, build) } do
+    expose :download_path, if: ->(*) { build.locked_artifacts? || build.artifacts? } do |build|
       fast_download_project_job_artifacts_path(project, build)
     end
 
-    expose :browse_path, if: -> (*) { build.locked_artifacts? || build.browsable_artifacts? } do |build|
+    expose :browse_path, if: ->(*) { build.locked_artifacts? || build.browsable_artifacts? } do |build|
       fast_browse_project_job_artifacts_path(project, build)
     end
 
-    expose :keep_path, if: -> (*) { (build.has_expired_locked_archive_artifacts? || build.has_expiring_archive_artifacts?) && can?(current_user, :update_build, build) } do |build|
+    expose :keep_path, if: ->(*) { (build.has_expired_locked_archive_artifacts? || build.has_expiring_archive_artifacts?) && can?(current_user, :update_build, build) } do |build|
       fast_keep_project_job_artifacts_path(project, build)
     end
 
-    expose :expire_at, if: -> (*) { build.artifacts_expire_at.present? } do |build|
+    expose :expire_at, if: ->(*) { build.artifacts_expire_at.present? } do |build|
       build.artifacts_expire_at
     end
 
-    expose :expired, if: -> (*) { build.artifacts_expire_at.present? } do |build|
+    expose :expired, if: ->(*) { build.artifacts_expire_at.present? } do |build|
       build.artifacts_expired?
     end
 
@@ -55,24 +55,24 @@ class BuildDetailsEntity < Ci::JobEntity
   expose :report_artifacts,
     as: :reports,
     using: JobArtifactReportEntity,
-    if: -> (*) { can?(current_user, :read_build, build) }
+    if: ->(*) { can?(current_user, :read_build, build) }
 
   expose :job_annotations,
     as: :annotations,
     using: Ci::JobAnnotationEntity
 
-  expose :erased_by, if: -> (*) { build.erased? }, using: UserEntity
-  expose :erase_path, if: -> (*) { build.erasable? && can?(current_user, :erase_build, build) } do |build|
+  expose :erased_by, if: ->(*) { build.erased? }, using: UserEntity
+  expose :erase_path, if: ->(*) { build.erasable? && can?(current_user, :erase_build, build) } do |build|
     erase_project_job_path(project, build)
   end
 
-  expose :failure_reason, if: -> (*) { build.failed? }
+  expose :failure_reason, if: ->(*) { build.failed? }
 
-  expose :terminal_path, if: -> (*) { can_create_build_terminal? } do |build|
+  expose :terminal_path, if: ->(*) { can_create_build_terminal? } do |build|
     terminal_project_job_path(project, build)
   end
 
-  expose :merge_request, if: -> (*) { can?(current_user, :read_merge_request, build.merge_request) } do
+  expose :merge_request, if: ->(*) { can?(current_user, :read_merge_request, build.merge_request) } do
     expose :iid do |build|
       build.merge_request.iid
     end
@@ -82,7 +82,7 @@ class BuildDetailsEntity < Ci::JobEntity
     end
   end
 
-  expose :new_issue_path, if: -> (*) { can?(request.current_user, :create_issue, project) && build.failed? } do |build|
+  expose :new_issue_path, if: ->(*) { can?(request.current_user, :create_issue, project) && build.failed? } do |build|
     new_project_issue_path(project, issue: build_failed_issue_options)
   end
 
@@ -90,7 +90,7 @@ class BuildDetailsEntity < Ci::JobEntity
     raw_project_job_path(project, build)
   end
 
-  expose :trigger, if: -> (*) { build.trigger_request } do
+  expose :trigger, if: ->(*) { build.trigger_request } do
     expose :trigger_short_token, as: :short_token
 
     expose :trigger_variables, as: :variables, using: TriggerVariableEntity
@@ -105,7 +105,7 @@ class BuildDetailsEntity < Ci::JobEntity
       build.any_runners_available?
     end
 
-    expose :settings_path, if: -> (*) { can_admin_build? } do |build|
+    expose :settings_path, if: ->(*) { can_admin_build? } do |build|
       project_runners_path(project)
     end
   end
diff --git a/app/serializers/ci/dag_job_entity.rb b/app/serializers/ci/dag_job_entity.rb
index ed4d4505152..f355c93207f 100644
--- a/app/serializers/ci/dag_job_entity.rb
+++ b/app/serializers/ci/dag_job_entity.rb
@@ -5,7 +5,7 @@ module Ci
     expose :name
     expose :scheduling_type
 
-    expose :needs, if: -> (job, _) { job.scheduling_type_dag? } do |job|
+    expose :needs, if: ->(job, _) { job.scheduling_type_dag? } do |job|
       job.needs.pluck(:name) # rubocop: disable CodeReuse/ActiveRecord
     end
   end
diff --git a/app/serializers/ci/job_entity.rb b/app/serializers/ci/job_entity.rb
index 828a9eb33a5..ece7d8d07f6 100644
--- a/app/serializers/ci/job_entity.rb
+++ b/app/serializers/ci/job_entity.rb
@@ -8,7 +8,7 @@ module Ci
     expose :name
 
     expose :started?, as: :started
-    expose :started_at, if: -> (job) { job.started? }
+    expose :started_at, if: ->(job) { job.started? }
     expose :complete?, as: :complete
     expose :archived?, as: :archived
 
@@ -17,11 +17,11 @@ module Ci
       job_path(job)
     end
 
-    expose :retry_path, if: -> (*) { retryable? } do |job|
+    expose :retry_path, if: ->(*) { retryable? } do |job|
       path_to(:retry_namespace_project_job, job)
     end
 
-    expose :cancel_path, if: -> (*) { cancelable? } do |job|
+    expose :cancel_path, if: ->(*) { cancelable? } do |job|
       path_to(
         :cancel_namespace_project_job,
         job,
@@ -29,24 +29,24 @@ module Ci
       )
     end
 
-    expose :play_path, if: -> (*) { playable? } do |job|
+    expose :play_path, if: ->(*) { playable? } do |job|
       path_to(:play_namespace_project_job, job)
     end
 
-    expose :unschedule_path, if: -> (*) { scheduled? } do |job|
+    expose :unschedule_path, if: ->(*) { scheduled? } do |job|
       path_to(:unschedule_namespace_project_job, job)
     end
 
     expose :playable?, as: :playable
     expose :scheduled?, as: :scheduled
-    expose :scheduled_at, if: -> (*) { scheduled? }
+    expose :scheduled_at, if: ->(*) { scheduled? }
     expose :created_at
     expose :queued_at
     expose :queued_duration
     expose :updated_at
     expose :detailed_status, as: :status, with: DetailedStatusEntity
-    expose :callout_message, if: -> (*) { failed? && !job.script_failure? }
-    expose :recoverable, if: -> (*) { failed? }
+    expose :callout_message, if: ->(*) { failed? && !job.script_failure? }
+    expose :recoverable, if: ->(*) { failed? }
 
     private
 
diff --git a/app/serializers/ci/pipeline_entity.rb b/app/serializers/ci/pipeline_entity.rb
index 4ff56c67d13..10a3330b923 100644
--- a/app/serializers/ci/pipeline_entity.rb
+++ b/app/serializers/ci/pipeline_entity.rb
@@ -45,7 +45,7 @@ class Ci::PipelineEntity < Grape::Entity
     expose :event_type_name
   end
 
-  expose :merge_request, if: -> (*) { has_presentable_merge_request? }, with: MergeRequestForPipelineEntity do |pipeline|
+  expose :merge_request, if: ->(*) { has_presentable_merge_request? }, with: MergeRequestForPipelineEntity do |pipeline|
     pipeline.merge_request.present(current_user: request.current_user)
   end
 
@@ -66,26 +66,26 @@ class Ci::PipelineEntity < Grape::Entity
   end
 
   expose :commit, using: CommitEntity
-  expose :merge_request_event_type, if: -> (pipeline, _) { pipeline.merge_request? }
-  expose :source_sha, if: -> (pipeline, _) { pipeline.merged_result_pipeline? }
-  expose :target_sha, if: -> (pipeline, _) { pipeline.merged_result_pipeline? }
-  expose :yaml_errors, if: -> (pipeline, _) { pipeline.has_yaml_errors? }
-  expose :failure_reason, if: -> (pipeline, _) { pipeline.failure_reason? }
+  expose :merge_request_event_type, if: ->(pipeline, _) { pipeline.merge_request? }
+  expose :source_sha, if: ->(pipeline, _) { pipeline.merged_result_pipeline? }
+  expose :target_sha, if: ->(pipeline, _) { pipeline.merged_result_pipeline? }
+  expose :yaml_errors, if: ->(pipeline, _) { pipeline.has_yaml_errors? }
+  expose :failure_reason, if: ->(pipeline, _) { pipeline.failure_reason? }
 
-  expose :retry_path, if: -> (*) { can_retry? } do |pipeline|
+  expose :retry_path, if: ->(*) { can_retry? } do |pipeline|
     retry_project_pipeline_path(pipeline.project, pipeline)
   end
 
-  expose :cancel_path, if: -> (*) { can_cancel? } do |pipeline|
+  expose :cancel_path, if: ->(*) { can_cancel? } do |pipeline|
     cancel_project_pipeline_path(pipeline.project, pipeline)
   end
 
-  expose :delete_path, if: -> (*) { can_delete? } do |pipeline|
+  expose :delete_path, if: ->(*) { can_delete? } do |pipeline|
     project_pipeline_path(pipeline.project, pipeline)
   end
 
   expose :failed_builds,
-    if: -> (_, options) { !options[:disable_failed_builds] && can_retry? },
+    if: ->(_, options) { !options[:disable_failed_builds] && can_retry? },
     using: Ci::JobEntity do |pipeline|
     pipeline.failed_builds.each do |build|
       build.project = pipeline.project
diff --git a/app/serializers/ci/trigger_entity.rb b/app/serializers/ci/trigger_entity.rb
index 628a7cbb365..744e75fd670 100644
--- a/app/serializers/ci/trigger_entity.rb
+++ b/app/serializers/ci/trigger_entity.rb
@@ -22,7 +22,7 @@ module Ci
       trigger.can_access_project?
     end
 
-    expose :project_trigger_path, if: -> (trigger) { can_manage_trigger?(trigger) } do |trigger|
+    expose :project_trigger_path, if: ->(trigger) { can_manage_trigger?(trigger) } do |trigger|
       project_trigger_path(options[:project], trigger)
     end
 
diff --git a/app/serializers/concerns/user_status_tooltip.rb b/app/serializers/concerns/user_status_tooltip.rb
index 38b3c16dd2a..31ecb79abec 100644
--- a/app/serializers/concerns/user_status_tooltip.rb
+++ b/app/serializers/concerns/user_status_tooltip.rb
@@ -8,7 +8,7 @@ module UserStatusTooltip
   include UsersHelper
 
   included do
-    expose :status_tooltip_html, if: -> (*) { status_loaded? } do |user|
+    expose :status_tooltip_html, if: ->(*) { status_loaded? } do |user|
       user_status(user)
     end
 
@@ -16,7 +16,7 @@ module UserStatusTooltip
       status_loaded? && !!user.status&.customized?
     end
 
-    expose :availability, if: -> (*) { status_loaded? } do |user|
+    expose :availability, if: ->(*) { status_loaded? } do |user|
       user.status&.availability
     end
 
diff --git a/app/serializers/container_repository_entity.rb b/app/serializers/container_repository_entity.rb
index 9a002971bef..d4882b8b225 100644
--- a/app/serializers/container_repository_entity.rb
+++ b/app/serializers/container_repository_entity.rb
@@ -10,7 +10,7 @@ class ContainerRepositoryEntity < Grape::Entity
     project_registry_repository_tags_path(project, repository, format: :json)
   end
 
-  expose :destroy_path, if: -> (*) { can_destroy? } do |repository|
+  expose :destroy_path, if: ->(*) { can_destroy? } do |repository|
     project_container_registry_path(project, repository, format: :json)
   end
 
diff --git a/app/serializers/container_tag_entity.rb b/app/serializers/container_tag_entity.rb
index 361c073e22e..5fae5608e41 100644
--- a/app/serializers/container_tag_entity.rb
+++ b/app/serializers/container_tag_entity.rb
@@ -5,7 +5,7 @@ class ContainerTagEntity < Grape::Entity
 
   expose :name, :path, :location, :digest, :revision, :short_revision, :total_size, :created_at
 
-  expose :destroy_path, if: -> (*) { can_destroy? } do |tag|
+  expose :destroy_path, if: ->(*) { can_destroy? } do |tag|
     project_registry_repository_tag_path(project, tag.repository, tag.name)
   end
 
diff --git a/app/views/events/event/_private.html.haml b/app/views/events/event/_private.html.haml
index 1ea6af85d04..74cfb407d89 100644
--- a/app/views/events/event/_private.html.haml
+++ b/app/views/events/event/_private.html.haml
@@ -2,7 +2,7 @@
   .event-item-timestamp.gl-font-sm
     = time_ago_with_tooltip(event.created_at)
 
-  .system-note-image.gl-rounded-full.gl-bg-gray-50.gl-line-height-0= sprite_icon('eye-slash', size: 14, css_class: 'icon')
+  .system-note-image.gl-rounded-full.gl-bg-gray-50.gl-leading-0= sprite_icon('eye-slash', size: 14, css_class: 'icon')
 
   = event_user_info(event)
 
diff --git a/app/views/groups/labels/index.html.haml b/app/views/groups/labels/index.html.haml
index e174d6318e9..43f8a6a9188 100644
--- a/app/views/groups/labels/index.html.haml
+++ b/app/views/groups/labels/index.html.haml
@@ -15,7 +15,7 @@
         = labels_function_introduction
       .other-labels.gl-rounded-base.gl-border.gl-bg-gray-10
         .gl-px-5.gl-py-4.gl-bg-white.gl-rounded-top-base.gl-border-b
-          %h3.card-title.h5.gl-m-0.gl-relative.gl-line-height-24
+          %h3.card-title.h5.gl-m-0.gl-relative.gl-leading-24
             = _('Labels')
         %ul.manage-labels-list.js-other-labels.gl-px-3.gl-rounded-base
           = render partial: 'shared/label', collection: @labels, as: :label, locals: { use_label_priority: false, subject: @group }
diff --git a/app/views/import/shared/_imported_badge.html.haml b/app/views/import/shared/_imported_badge.html.haml
index 8da76d45019..3f52ce33be8 100644
--- a/app/views/import/shared/_imported_badge.html.haml
+++ b/app/views/import/shared/_imported_badge.html.haml
@@ -2,6 +2,6 @@
 - text_only = local_assigns.fetch(:text_only, false)
 
 - if text_only
-  %span.has-tooltip.gl-line-height-normal.gl-font-sm{ title: tooltip_title }= _('Imported')
+  %span.has-tooltip.gl-leading-normal.gl-font-sm{ title: tooltip_title }= _('Imported')
 - else
   = render Pajamas::BadgeComponent.new(_('Imported'), size: :sm, title: tooltip_title, class: 'has-tooltip')
diff --git a/app/views/layouts/terms.html.haml b/app/views/layouts/terms.html.haml
index ceb947f535b..4983d2af881 100644
--- a/app/views/layouts/terms.html.haml
+++ b/app/views/layouts/terms.html.haml
@@ -20,7 +20,7 @@
                 = brand_header_logo({add_gitlab_black_text: true})
                 - if current_user
                   .gl-display-flex.gl-gap-2.gl-align-items-center
-                    .gl-text-right.gl-line-height-normal
+                    .gl-text-right.gl-leading-normal
                       .gl-font-weight-bold= current_user.name
                       .gl-text-gray-700 @#{current_user.username}
                     = render Pajamas::AvatarComponent.new(current_user, size: 32, avatar_options: { data: { testid: 'user-avatar-content' } })
diff --git a/app/views/shared/issuable/_search_bar.html.haml b/app/views/shared/issuable/_search_bar.html.haml
index 1d17b9724f4..be049a2b702 100644
--- a/app/views/shared/issuable/_search_bar.html.haml
+++ b/app/views/shared/issuable/_search_bar.html.haml
@@ -13,7 +13,7 @@
         - if params[:search].present?
           = hidden_field_tag :search, params[:search]
         - if @can_bulk_update
-          .check-all-holder.gl-display-none.gl-sm-display-block.hidden.gl-float-left.gl-mr-3.gl-line-height-36
+          .check-all-holder.gl-display-none.gl-sm-display-block.hidden.gl-float-left.gl-mr-3.gl-leading-36
             = render Pajamas::CheckboxTagComponent.new(name: 'check-all-issues', value: nil) do |c|
               - c.with_label do
                 %span.gl-sr-only
diff --git a/app/views/shared/notes/_hints.html.haml b/app/views/shared/notes/_hints.html.haml
index ab8d4bba8ac..702ffebef6c 100644
--- a/app/views/shared/notes/_hints.html.haml
+++ b/app/views/shared/notes/_hints.html.haml
@@ -3,7 +3,7 @@
   .content-editor-switcher.gl-display-inline-flex.gl-align-items-center
     = render Pajamas::ButtonComponent.new(category: :tertiary, icon: 'markdown-mark', size: :small, href: help_page_path('user/markdown'), target: '_blank', button_options: { class: 'gl-px-3!' })
   - if supports_file_upload
-    %span.uploading-container.gl-line-height-32.gl-font-sm
+    %span.uploading-container.gl-leading-32.gl-font-sm
       %span.uploading-progress-container.hide
         = sprite_icon('paperclip', css_class: 'gl-icon gl-vertical-align-text-bottom')
         %span.attaching-file-message
diff --git a/app/views/shared/projects/_project.html.haml b/app/views/shared/projects/_project.html.haml
index f631bccbd79..2c964fbe7a6 100644
--- a/app/views/shared/projects/_project.html.haml
+++ b/app/views/shared/projects/_project.html.haml
@@ -28,7 +28,7 @@
   .project-cell{ class: css_class }
     .project-details.gl-pr-9.gl-sm-pr-0.gl-w-full.gl-display-flex.gl-flex-direction-column{ data: { testid: 'project-content', qa_project_name: project.name } }
       .gl-display-flex.gl-align-items-baseline.gl-flex-wrap
-        %h2.gl-font-base.gl-line-height-20.gl-my-0.gl-overflow-wrap-anywhere
+        %h2.gl-font-base.gl-leading-20.gl-my-0.gl-overflow-wrap-anywhere
           = link_to project_path(project), class: 'text-plain gl-mr-3 js-prefetch-document', title: project.name do
             %span.namespace-name.gl-font-weight-normal
               - if project.namespace && !skip_namespace
diff --git a/app/views/shared/projects/_project_card.html.haml b/app/views/shared/projects/_project_card.html.haml
index 5625a66c16a..242edbe34a3 100644
--- a/app/views/shared/projects/_project_card.html.haml
+++ b/app/views/shared/projects/_project_card.html.haml
@@ -26,7 +26,7 @@
 
     .gl-w-full.gl-pt-2.gl-break-anywhere
       .gl-display-flex.gl-align-items-center.gl-flex-wrap
-        %h2.gl-font-base.gl-line-height-20.gl-my-0
+        %h2.gl-font-base.gl-leading-20.gl-my-0
           = link_to project_path(project), class: 'text-plain gl-mr-3 js-prefetch-document', title: project.name do
             %span.namespace-name.gl-font-weight-normal
               - if project.namespace && !skip_namespace
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index 1acf893736a..e61e62cef66 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -32,7 +32,7 @@
         - if @user.status&.busy?
           = render Pajamas::BadgeComponent.new(s_('UserProfile|Busy'), size: 'sm', variant: 'warning', class: 'gl-absolute gl-display-flex gl-justify-content-center gl-align-items-center gl-left-1/2 gl-bg-gray-50 gl-border gl-border-white -gl-translate-x-1/2 gl-top-full -gl-mt-3')
       %div
-        %h1.gl-heading-1.gl-line-height-1.gl-mr-2{ class: 'gl-my-0!', itemprop: 'name' }
+        %h1.gl-heading-1.gl-leading-1.gl-mr-2{ class: 'gl-my-0!', itemprop: 'name' }
           = user_display_name(@user)
         .gl-font-size-h2.gl-text-gray-500.gl-font-weight-normal.gl-my-0
           = @user.to_reference
diff --git a/config/tailwind.config.js b/config/tailwind.config.js
index 60c058e4681..e3a7e6b0367 100644
--- a/config/tailwind.config.js
+++ b/config/tailwind.config.js
@@ -119,6 +119,15 @@ module.exports = {
     // TODO: Backport to GitLab UI.
     lineHeight: {
       reset: 'inherit',
+      0: '0',
+      1: '1',
+      normal: '1rem',
+      20: '1.25rem',
+      24: '1.5rem',
+      28: '1.75rem',
+      32: '2rem',
+      36: '2.25rem',
+      42: '2.625rem',
     },
     transitionDuration: {
       DEFAULT: '200ms',
diff --git a/doc/policy/maintenance.md b/doc/policy/maintenance.md
index fb41c704541..81d284b0efd 100644
--- a/doc/policy/maintenance.md
+++ b/doc/policy/maintenance.md
@@ -37,9 +37,9 @@ The following table describes the version types and their release cadence:
 
 | Version type | Description | Cadence |
 |:-------------|:------------|:--------|
-| Major        | For significant changes, or when any backward-incompatible changes are introduced to the public API. | Yearly. The next major release is GitLab 17.0, scheduled for May 16th, 2024. GitLab [schedules major releases](https://about.gitlab.com/releases/) for May each year, by default. |
-| Minor        | For when new backward-compatible functionality is introduced to the public API, a minor feature is introduced, or when a set of smaller features is rolled out. | Monthly. |
-| Patch        | For backward-compatible bug fixes that fix incorrect behavior. See [Patch releases](#patch-releases). | As needed. |
+| Major        | For significant changes, or when any backward-incompatible changes are introduced to the public API. | Yearly. The next major release is GitLab 18.0, scheduled for May 15th, 2025. GitLab [schedules major releases](https://about.gitlab.com/releases/) for May each year, by default. |
+| Minor        | For when new backward-compatible functionality is introduced to the public API, a minor feature is introduced, or when a set of smaller features is rolled out. | Monthly, scheduled for the third Thursday of each month. |
+| Patch        | For backward-compatible bug fixes that fix incorrect behavior. See [Patch releases](#patch-releases). | Bi-monthly, scheduled for the second and fourth Wednesday of each month. |
 
 ## Upgrade recommendations
 
diff --git a/doc/user/group/epics/manage_epics.md b/doc/user/group/epics/manage_epics.md
index 6557701c25f..6f7065432bc 100644
--- a/doc/user/group/epics/manage_epics.md
+++ b/doc/user/group/epics/manage_epics.md
@@ -346,12 +346,12 @@ you might not have permission to.
 
 ### Add an issue to an epic
 
-> - Maximum number of child issues and epics [changed](https://gitlab.com/gitlab-org/gitlab/-/issues/452111) to 100 in GitLab 17.0.
+> - Maximum number of child issues and epics [changed](https://gitlab.com/gitlab-org/gitlab/-/issues/452111) to 5000 in GitLab 17.1.
 
 Add an existing issue to an epic, or create a new issue that's automatically
 added to the epic.
 
-The maximum number of direct child issues and epics is 100.
+The maximum number of direct child issues and epics is 5000.
 
 #### Add an existing issue to an epic
 
diff --git a/lib/gitlab/error_tracking/detailed_error.rb b/lib/gitlab/error_tracking/detailed_error.rb
index d9ddb6caeec..94293338f0b 100644
--- a/lib/gitlab/error_tracking/detailed_error.rb
+++ b/lib/gitlab/error_tracking/detailed_error.rb
@@ -9,34 +9,34 @@ module Gitlab
       include GlobalID::Identification
 
       attr_accessor :count,
-                    :culprit,
-                    :external_base_url,
-                    :external_url,
-                    :first_release_last_commit,
-                    :first_release_short_version,
-                    :first_release_version,
-                    :first_seen,
-                    :frequency,
-                    :gitlab_commit,
-                    :gitlab_commit_path,
-                    :gitlab_issue,
-                    :gitlab_project,
-                    :id,
-                    :integrated,
-                    :last_release_last_commit,
-                    :last_release_short_version,
-                    :last_release_version,
-                    :last_seen,
-                    :message,
-                    :project_id,
-                    :project_name,
-                    :project_slug,
-                    :short_id,
-                    :status,
-                    :tags,
-                    :title,
-                    :type,
-                    :user_count
+        :culprit,
+        :external_base_url,
+        :external_url,
+        :first_release_last_commit,
+        :first_release_short_version,
+        :first_release_version,
+        :first_seen,
+        :frequency,
+        :gitlab_commit,
+        :gitlab_commit_path,
+        :gitlab_issue,
+        :gitlab_project,
+        :id,
+        :integrated,
+        :last_release_last_commit,
+        :last_release_short_version,
+        :last_release_version,
+        :last_seen,
+        :message,
+        :project_id,
+        :project_name,
+        :project_slug,
+        :short_id,
+        :status,
+        :tags,
+        :title,
+        :type,
+        :user_count
 
       def self.declarative_policy_class
         'ErrorTracking::BasePolicy'
diff --git a/lib/gitlab/external_authorization/access.rb b/lib/gitlab/external_authorization/access.rb
index 21fa728fd3a..cae005e4aa6 100644
--- a/lib/gitlab/external_authorization/access.rb
+++ b/lib/gitlab/external_authorization/access.rb
@@ -4,10 +4,10 @@ module Gitlab
   module ExternalAuthorization
     class Access
       attr_reader :user,
-                  :reason,
-                  :loaded_at,
-                  :label,
-                  :load_type
+        :reason,
+        :loaded_at,
+        :label,
+        :load_type
 
       def initialize(user, label)
         @user = user
diff --git a/lib/gitlab/gfm/reference_rewriter.rb b/lib/gitlab/gfm/reference_rewriter.rb
index 0c13ab604bc..c0dd5964cc6 100644
--- a/lib/gitlab/gfm/reference_rewriter.rb
+++ b/lib/gitlab/gfm/reference_rewriter.rb
@@ -91,7 +91,7 @@ module Gitlab
 
       def find_referable(reference)
         extractor = Gitlab::ReferenceExtractor.new(@source_parent,
-                                                   @current_user)
+          @current_user)
         extractor.analyze(reference)
         extractor.all.first
       end
diff --git a/lib/gitlab/git/blob.rb b/lib/gitlab/git/blob.rb
index b8e80a2d6d7..39d7a60ff79 100644
--- a/lib/gitlab/git/blob.rb
+++ b/lib/gitlab/git/blob.rb
@@ -74,7 +74,7 @@ module Gitlab
             new(id: entry.oid, name: name, size: 0, data: '', path: path, commit_id: sha)
           when :BLOB
             new(id: entry.oid, name: name, size: entry.size, data: entry.data.dup, mode: entry.mode.to_s(8),
-                path: path, commit_id: sha, binary: binary?(entry.data))
+              path: path, commit_id: sha, binary: binary?(entry.data))
           end
         end
 
diff --git a/lib/gitlab/git/conflict/file.rb b/lib/gitlab/git/conflict/file.rb
index 049ca5a54b3..8319621ed41 100644
--- a/lib/gitlab/git/conflict/file.rb
+++ b/lib/gitlab/git/conflict/file.rb
@@ -26,8 +26,8 @@ module Gitlab
           begin
             @type = 'text'
             @lines = Gitlab::Git::Conflict::Parser.parse(content,
-                                                         our_path: our_path,
-                                                         their_path: their_path)
+              our_path: our_path,
+              their_path: their_path)
           rescue Gitlab::Git::Conflict::Parser::ParserError
             @type = 'text-editor'
             @lines = nil
diff --git a/lib/gitlab/git/repository.rb b/lib/gitlab/git/repository.rb
index 204dafa228d..9bd28345a1c 100644
--- a/lib/gitlab/git/repository.rb
+++ b/lib/gitlab/git/repository.rb
@@ -428,7 +428,7 @@ module Gitlab
 
         wrapped_gitaly_errors do
           gitaly_blob_client.list_blobs(revisions, limit: REV_LIST_COMMIT_LIMIT,
-                                                   with_paths: with_paths, dynamic_timeout: dynamic_timeout)
+            with_paths: with_paths, dynamic_timeout: dynamic_timeout)
         end
       end
 
@@ -668,20 +668,20 @@ module Gitlab
       def merge(user, source_sha:, target_branch:, message:, target_sha: nil, &block)
         wrapped_gitaly_errors do
           gitaly_operation_client.user_merge_branch(user,
-                                                    source_sha: source_sha,
-                                                    target_branch: target_branch,
-                                                    message: message,
-                                                    target_sha: target_sha,
-                                                    &block)
+            source_sha: source_sha,
+            target_branch: target_branch,
+            message: message,
+            target_sha: target_sha,
+            &block)
         end
       end
 
       def ff_merge(user, source_sha:, target_branch:, target_sha: nil)
         wrapped_gitaly_errors do
           gitaly_operation_client.user_ff_branch(user,
-                                                 source_sha: source_sha,
-                                                 target_branch: target_branch,
-                                                 target_sha: target_sha)
+            source_sha: source_sha,
+            target_branch: target_branch,
+            target_sha: target_sha)
         end
       end
 
@@ -831,10 +831,10 @@ module Gitlab
           break nil if response.license_short_name.empty?
 
           ::Gitlab::Git::DeclaredLicense.new(key: response.license_short_name,
-                                             name: response.license_name,
-                                             nickname: response.license_nickname.presence,
-                                             url: response.license_url.presence,
-                                             path: response.license_path)
+            name: response.license_name,
+            nickname: response.license_nickname.presence,
+            url: response.license_url.presence,
+            path: response.license_path)
         end
       rescue Licensee::InvalidLicense => e
         Gitlab::ErrorTracking.track_exception(e)
@@ -1016,8 +1016,8 @@ module Gitlab
 
         wrapped_gitaly_errors do
           gitaly_operation_client.user_commit_files(user, branch_name,
-              message, actions, author_email, author_name,
-              start_branch_name, start_repository, force, start_sha, sign)
+            message, actions, author_email, author_name,
+            start_branch_name, start_repository, force, start_sha, sign)
         end
       end
       # rubocop:enable Metrics/ParameterLists
diff --git a/lib/gitlab/git_access.rb b/lib/gitlab/git_access.rb
index cfb6ae16dd1..0cfef4ed802 100644
--- a/lib/gitlab/git_access.rb
+++ b/lib/gitlab/git_access.rb
@@ -43,8 +43,8 @@ module Gitlab
     ALL_COMMANDS = DOWNLOAD_COMMANDS + PUSH_COMMANDS
 
     attr_reader :actor, :protocol, :authentication_abilities,
-                :repository_path, :redirected_path, :auth_result_type,
-                :cmd, :changes, :push_options
+      :repository_path, :redirected_path, :auth_result_type,
+      :cmd, :changes, :push_options
     attr_accessor :container
 
     def self.error_message(key)
diff --git a/lib/gitlab/gitaly_client/object_pool_service.rb b/lib/gitlab/gitaly_client/object_pool_service.rb
index e07bf3fbccc..d0771b8b511 100644
--- a/lib/gitlab/gitaly_client/object_pool_service.rb
+++ b/lib/gitlab/gitaly_client/object_pool_service.rb
@@ -19,7 +19,7 @@ module Gitlab
 
         GitalyClient.with_feature_flag_actors(**gitaly_feature_flag_actors(repository)) do
           GitalyClient.call(storage, :object_pool_service, :create_object_pool,
-                            request, timeout: GitalyClient.medium_timeout)
+            request, timeout: GitalyClient.medium_timeout)
         end
       end
 
@@ -27,7 +27,7 @@ module Gitlab
         request = Gitaly::DeleteObjectPoolRequest.new(object_pool: object_pool)
 
         GitalyClient.call(storage, :object_pool_service, :delete_object_pool,
-                          request, timeout: GitalyClient.long_timeout)
+          request, timeout: GitalyClient.long_timeout)
       end
 
       def link_repository(repository)
@@ -38,7 +38,7 @@ module Gitlab
 
         GitalyClient.with_feature_flag_actors(**gitaly_feature_flag_actors(repository)) do
           GitalyClient.call(storage, :object_pool_service, :link_repository_to_object_pool,
-                            request, timeout: GitalyClient.fast_timeout)
+            request, timeout: GitalyClient.fast_timeout)
         end
       end
 
@@ -50,7 +50,7 @@ module Gitlab
 
         GitalyClient.with_feature_flag_actors(**gitaly_feature_flag_actors(repository)) do
           GitalyClient.call(storage, :object_pool_service, :fetch_into_object_pool,
-                            request, timeout: GitalyClient.long_timeout)
+            request, timeout: GitalyClient.long_timeout)
         end
       end
     end
diff --git a/lib/gitlab/gitaly_client/operation_service.rb b/lib/gitlab/gitaly_client/operation_service.rb
index 208774845b6..c455e7d60ca 100644
--- a/lib/gitlab/gitaly_client/operation_service.rb
+++ b/lib/gitlab/gitaly_client/operation_service.rb
@@ -54,7 +54,7 @@ module Gitlab
           raise Gitlab::Git::PreReceiveError.new(fallback_message: access_check_error.error_message)
         when :custom_hook
           raise Gitlab::Git::PreReceiveError.new(custom_hook_error_message(detailed_error.custom_hook),
-                                                 fallback_message: CUSTOM_HOOK_FALLBACK_MESSAGE)
+            fallback_message: CUSTOM_HOOK_FALLBACK_MESSAGE)
         when :reference_exists
           raise Gitlab::Git::Repository::TagExistsError
         else
@@ -74,7 +74,7 @@ module Gitlab
           start_point: encode_binary(start_point)
         )
         response = gitaly_client_call(@repository.storage, :operation_service,
-                                     :user_create_branch, request, timeout: GitalyClient.long_timeout)
+          :user_create_branch, request, timeout: GitalyClient.long_timeout)
 
         branch = response.branch
         return unless branch
@@ -87,7 +87,7 @@ module Gitlab
         case detailed_error.try(:error)
         when :custom_hook
           raise Gitlab::Git::PreReceiveError.new(custom_hook_error_message(detailed_error.custom_hook),
-                                                 fallback_message: CUSTOM_HOOK_FALLBACK_MESSAGE)
+            fallback_message: CUSTOM_HOOK_FALLBACK_MESSAGE)
         else
           if e.code == GRPC::Core::StatusCodes::FAILED_PRECONDITION
             raise Gitlab::Git::Repository::InvalidRef, e
@@ -107,7 +107,7 @@ module Gitlab
         )
 
         response = gitaly_client_call(@repository.storage, :operation_service,
-                                     :user_update_branch, request, timeout: GitalyClient.long_timeout)
+          :user_update_branch, request, timeout: GitalyClient.long_timeout)
 
         if pre_receive_error = response.pre_receive_error.presence
           raise Gitlab::Git::PreReceiveError, pre_receive_error
@@ -122,14 +122,14 @@ module Gitlab
         )
 
         gitaly_client_call(@repository.storage, :operation_service,
-                           :user_delete_branch, request, timeout: GitalyClient.long_timeout)
+          :user_delete_branch, request, timeout: GitalyClient.long_timeout)
       rescue GRPC::BadStatus => e
         detailed_error = GitalyClient.decode_detailed_error(e)
 
         case detailed_error.try(:error)
         when :custom_hook
           raise Gitlab::Git::PreReceiveError.new(custom_hook_error_message(detailed_error.custom_hook),
-                                                 fallback_message: CUSTOM_HOOK_FALLBACK_MESSAGE)
+            fallback_message: CUSTOM_HOOK_FALLBACK_MESSAGE)
         else
           raise
         end
@@ -149,7 +149,7 @@ module Gitlab
         )
 
         response = gitaly_client_call(@repository.storage, :operation_service,
-                                     :user_merge_to_ref, request, timeout: GitalyClient.long_timeout)
+          :user_merge_to_ref, request, timeout: GitalyClient.long_timeout)
 
         response.commit_id
       end
@@ -200,7 +200,7 @@ module Gitlab
           raise Gitlab::Git::PreReceiveError.new(fallback_message: access_check_error.error_message)
         when :custom_hook
           raise Gitlab::Git::PreReceiveError.new(custom_hook_error_message(detailed_error.custom_hook),
-                                                 fallback_message: CUSTOM_HOOK_FALLBACK_MESSAGE)
+            fallback_message: CUSTOM_HOOK_FALLBACK_MESSAGE)
         when :reference_update
           # We simply ignore any reference update errors which are typically an
           # indicator of multiple RPC calls trying to update the same reference
@@ -329,7 +329,7 @@ module Gitlab
           raise Gitlab::Git::Repository::CreateTreeError, 'EMPTY'
         when :custom_hook
           raise Gitlab::Git::PreReceiveError.new(custom_hook_error_message(detailed_error.custom_hook),
-                                                 fallback_message: CUSTOM_HOOK_FALLBACK_MESSAGE)
+            fallback_message: CUSTOM_HOOK_FALLBACK_MESSAGE)
         when :not_ancestor
           raise Gitlab::Git::CommitError, 'branch diverged'
         else
@@ -407,7 +407,7 @@ module Gitlab
         )
 
         response = gitaly_client_call(@repository.storage, :operation_service,
-                                     :user_rebase_to_ref, request, timeout: GitalyClient.long_timeout)
+          :user_rebase_to_ref, request, timeout: GitalyClient.long_timeout)
 
         response.commit_id
       end
@@ -488,8 +488,8 @@ module Gitlab
         start_branch_name, start_repository, force = false, start_sha = nil, sign = true)
         req_enum = Enumerator.new do |y|
           header = user_commit_files_request_header(user, branch_name,
-          commit_message, actions, author_email, author_name,
-          start_branch_name, start_repository, force, start_sha, sign)
+            commit_message, actions, author_email, author_name,
+            start_branch_name, start_repository, force, start_sha, sign)
 
           y.yield Gitaly::UserCommitFilesRequest.new(header: header)
 
@@ -534,7 +534,7 @@ module Gitlab
           raise Gitlab::Git::PreReceiveError.new(fallback_message: access_check_error.error_message)
         when :custom_hook
           raise Gitlab::Git::PreReceiveError.new(custom_hook_error_message(detailed_error.custom_hook),
-                                                 fallback_message: CUSTOM_HOOK_FALLBACK_MESSAGE)
+            fallback_message: CUSTOM_HOOK_FALLBACK_MESSAGE)
         when :index_update
           raise Gitlab::Git::Index::IndexError, index_error_message(detailed_error.index_update)
         else
@@ -571,7 +571,7 @@ module Gitlab
         end
 
         response = gitaly_client_call(@repository.storage, :operation_service,
-                                     :user_apply_patch, chunks, timeout: GitalyClient.long_timeout)
+          :user_apply_patch, chunks, timeout: GitalyClient.long_timeout)
 
         Gitlab::Git::OperationService::BranchUpdate.from_gitaly(response.branch_update)
       end
diff --git a/lib/gitlab/gitaly_client/remote_service.rb b/lib/gitlab/gitaly_client/remote_service.rb
index 9647cfad76e..1639cbb8292 100644
--- a/lib/gitlab/gitaly_client/remote_service.rb
+++ b/lib/gitlab/gitaly_client/remote_service.rb
@@ -14,9 +14,9 @@ module Gitlab
         request = Gitaly::FindRemoteRepositoryRequest.new(remote: remote_url, storage_name: storage)
 
         response = GitalyClient.call(storage,
-                                     :remote_service,
-                                     :find_remote_repository, request,
-                                     timeout: GitalyClient.medium_timeout)
+          :remote_service,
+          :find_remote_repository, request,
+          timeout: GitalyClient.medium_timeout)
 
         response.exists
       end
@@ -31,11 +31,11 @@ module Gitlab
 
       def find_remote_root_ref(remote_url, authorization)
         request = Gitaly::FindRemoteRootRefRequest.new(repository: @gitaly_repo,
-                                                       remote_url: remote_url,
-                                                       http_authorization_header: authorization)
+          remote_url: remote_url,
+          http_authorization_header: authorization)
 
         response = gitaly_client_call(@storage, :remote_service,
-                                     :find_remote_root_ref, request, timeout: GitalyClient.medium_timeout)
+          :find_remote_root_ref, request, timeout: GitalyClient.medium_timeout)
 
         encode_utf8(response.ref)
       end
diff --git a/lib/gitlab/gitaly_client/repository_service.rb b/lib/gitlab/gitaly_client/repository_service.rb
index d7525d32496..f527901dac1 100644
--- a/lib/gitlab/gitaly_client/repository_service.rb
+++ b/lib/gitlab/gitaly_client/repository_service.rb
@@ -37,7 +37,7 @@ module Gitlab
                    end
 
         request = Gitaly::OptimizeRepositoryRequest.new(repository: @gitaly_repo,
-                                                        strategy: strategy)
+          strategy: strategy)
         gitaly_client_call(@storage, :repository_service, :optimize_repository, request, timeout: GitalyClient.long_timeout)
       end
 
diff --git a/lib/gitlab/gitaly_client/util.rb b/lib/gitlab/gitaly_client/util.rb
index 899921f76e4..74618976c85 100644
--- a/lib/gitlab/gitaly_client/util.rb
+++ b/lib/gitlab/gitaly_client/util.rb
@@ -21,9 +21,9 @@ module Gitlab
 
         def git_repository(gitaly_repository)
           Gitlab::Git::Repository.new(gitaly_repository.storage_name,
-                                      gitaly_repository.relative_path,
-                                      gitaly_repository.gl_repository,
-                                      gitaly_repository.gl_project_path)
+            gitaly_repository.relative_path,
+            gitaly_repository.gl_repository,
+            gitaly_repository.gl_project_path)
         end
       end
     end
diff --git a/package.json b/package.json
index da59fab763e..b149ae6ae5c 100644
--- a/package.json
+++ b/package.json
@@ -65,7 +65,7 @@
     "@gitlab/favicon-overlay": "2.0.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/svgs": "3.99.0",
-    "@gitlab/ui": "80.14.0",
+    "@gitlab/ui": "80.14.1",
     "@gitlab/web-ide": "^0.0.1-dev-20240508140740",
     "@mattiasbuelens/web-streams-adapter": "^0.1.0",
     "@rails/actioncable": "7.0.8-1",
diff --git a/spec/frontend/blob/components/__snapshots__/blob_header_filepath_spec.js.snap b/spec/frontend/blob/components/__snapshots__/blob_header_filepath_spec.js.snap
index f9940f7b924..3fc9be3577b 100644
--- a/spec/frontend/blob/components/__snapshots__/blob_header_filepath_spec.js.snap
+++ b/spec/frontend/blob/components/__snapshots__/blob_header_filepath_spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Blob Header Filepath rendering matches the snapshot 1`] = `
 <div
-  class="d-flex file-header-content gl-align-items-center gl-line-height-1"
+  class="d-flex file-header-content gl-align-items-center gl-leading-1"
 >
   <file-icon-stub
     aria-hidden="true"
diff --git a/spec/frontend/ci/pipeline_details/graph/components/graph_component_spec.js b/spec/frontend/ci/pipeline_details/graph/components/graph_component_spec.js
index ad884563f6f..f5e5ad5d2bd 100644
--- a/spec/frontend/ci/pipeline_details/graph/components/graph_component_spec.js
+++ b/spec/frontend/ci/pipeline_details/graph/components/graph_component_spec.js
@@ -207,7 +207,7 @@ describe('graph component', () => {
         'gl-font-weight-bold',
         'gl-pipeline-job-width',
         'gl-text-truncate',
-        'gl-line-height-36',
+        'gl-leading-36',
         'gl-pl-4',
         '-gl-mb-2',
       ];
diff --git a/spec/frontend/diffs/components/shared/__snapshots__/findings_drawer_spec.js.snap b/spec/frontend/diffs/components/shared/__snapshots__/findings_drawer_spec.js.snap
index e8d71ab14d3..2f750174550 100644
--- a/spec/frontend/diffs/components/shared/__snapshots__/findings_drawer_spec.js.snap
+++ b/spec/frontend/diffs/components/shared/__snapshots__/findings_drawer_spec.js.snap
@@ -64,7 +64,7 @@ exports[`FindingsDrawer General Rendering matches the snapshot with detected bad
           data-testid="findings-drawer-title"
         >
           <p
-            class="gl-line-height-20"
+            class="gl-leading-20"
           >
             <span
               class="gl-display-block gl-font-weight-bold gl-mb-1"
@@ -83,7 +83,7 @@ exports[`FindingsDrawer General Rendering matches the snapshot with detected bad
           class="gl-mb-4"
         >
           <p
-            class="gl-line-height-20"
+            class="gl-leading-20"
           >
             <span
               class="gl-display-block gl-font-weight-bold gl-mb-1"
@@ -102,7 +102,7 @@ exports[`FindingsDrawer General Rendering matches the snapshot with detected bad
           class="gl-mb-4"
         >
           <p
-            class="gl-line-height-20"
+            class="gl-leading-20"
           >
             <span
               class="gl-display-block gl-font-weight-bold gl-mb-1"
@@ -121,7 +121,7 @@ exports[`FindingsDrawer General Rendering matches the snapshot with detected bad
           class="gl-mb-4"
         >
           <p
-            class="gl-line-height-20"
+            class="gl-leading-20"
           >
             <span
               class="gl-display-block gl-font-weight-bold gl-mb-1"
@@ -141,7 +141,7 @@ exports[`FindingsDrawer General Rendering matches the snapshot with detected bad
           class="gl-mb-4"
         >
           <p
-            class="gl-line-height-20"
+            class="gl-leading-20"
           >
             <span
               class="gl-display-block gl-font-weight-bold gl-mb-1"
@@ -158,7 +158,7 @@ exports[`FindingsDrawer General Rendering matches the snapshot with detected bad
           class="gl-mb-4"
         >
           <p
-            class="gl-line-height-20"
+            class="gl-leading-20"
           >
             <span
               class="gl-display-block gl-font-weight-bold gl-mb-1"
@@ -180,7 +180,7 @@ exports[`FindingsDrawer General Rendering matches the snapshot with detected bad
           class="gl-mb-4"
         >
           <p
-            class="gl-line-height-20"
+            class="gl-leading-20"
           >
             <span
               class="gl-display-block gl-font-weight-bold gl-mb-1"
@@ -199,7 +199,7 @@ exports[`FindingsDrawer General Rendering matches the snapshot with detected bad
           class="gl-mb-4"
         >
           <p
-            class="gl-line-height-20"
+            class="gl-leading-20"
           >
             <span
               class="gl-display-block gl-font-weight-bold gl-mb-1"
@@ -284,7 +284,7 @@ exports[`FindingsDrawer General Rendering matches the snapshot with dismissed ba
           data-testid="findings-drawer-title"
         >
           <p
-            class="gl-line-height-20"
+            class="gl-leading-20"
           >
             <span
               class="gl-display-block gl-font-weight-bold gl-mb-1"
@@ -303,7 +303,7 @@ exports[`FindingsDrawer General Rendering matches the snapshot with dismissed ba
           class="gl-mb-4"
         >
           <p
-            class="gl-line-height-20"
+            class="gl-leading-20"
           >
             <span
               class="gl-display-block gl-font-weight-bold gl-mb-1"
@@ -322,7 +322,7 @@ exports[`FindingsDrawer General Rendering matches the snapshot with dismissed ba
           class="gl-mb-4"
         >
           <p
-            class="gl-line-height-20"
+            class="gl-leading-20"
           >
             <span
               class="gl-display-block gl-font-weight-bold gl-mb-1"
@@ -341,7 +341,7 @@ exports[`FindingsDrawer General Rendering matches the snapshot with dismissed ba
           class="gl-mb-4"
         >
           <p
-            class="gl-line-height-20"
+            class="gl-leading-20"
           >
             <span
               class="gl-display-block gl-font-weight-bold gl-mb-1"
@@ -361,7 +361,7 @@ exports[`FindingsDrawer General Rendering matches the snapshot with dismissed ba
           class="gl-mb-4"
         >
           <p
-            class="gl-line-height-20"
+            class="gl-leading-20"
           >
             <span
               class="gl-display-block gl-font-weight-bold gl-mb-1"
@@ -378,7 +378,7 @@ exports[`FindingsDrawer General Rendering matches the snapshot with dismissed ba
           class="gl-mb-4"
         >
           <p
-            class="gl-line-height-20"
+            class="gl-leading-20"
           >
             <span
               class="gl-display-block gl-font-weight-bold gl-mb-1"
@@ -400,7 +400,7 @@ exports[`FindingsDrawer General Rendering matches the snapshot with dismissed ba
           class="gl-mb-4"
         >
           <p
-            class="gl-line-height-20"
+            class="gl-leading-20"
           >
             <span
               class="gl-display-block gl-font-weight-bold gl-mb-1"
@@ -419,7 +419,7 @@ exports[`FindingsDrawer General Rendering matches the snapshot with dismissed ba
           class="gl-mb-4"
         >
           <p
-            class="gl-line-height-20"
+            class="gl-leading-20"
           >
             <span
               class="gl-display-block gl-font-weight-bold gl-mb-1"
diff --git a/spec/frontend/environments/environment_details/components/kubernetes/kubernetes_pods_spec.js b/spec/frontend/environments/environment_details/components/kubernetes/kubernetes_pods_spec.js
index b7a77701d10..7210549122a 100644
--- a/spec/frontend/environments/environment_details/components/kubernetes/kubernetes_pods_spec.js
+++ b/spec/frontend/environments/environment_details/components/kubernetes/kubernetes_pods_spec.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import { shallowMount } from '@vue/test-utils';
 import { GlLoadingIcon, GlTab } from '@gitlab/ui';
@@ -131,6 +131,18 @@ describe('~/environments/environment_details/components/kubernetes/kubernetes_po
       findWorkloadTable().vm.$emit('remove-selection');
       expect(wrapper.emitted('remove-selection')).toHaveLength(1);
     });
+
+    it('filters pods when receives a stat select event', async () => {
+      createWrapper();
+      await waitForPromises();
+
+      const status = 'Failed';
+      findWorkloadStats().vm.$emit('select', status);
+      await nextTick();
+
+      const filteredPods = mockPodsTableItems.filter((pod) => pod.status === status);
+      expect(findWorkloadTable().props('items')).toMatchObject(filteredPods);
+    });
   });
 
   describe('when gets an error from the cluster_client API', () => {
diff --git a/spec/frontend/kubernetes_dashboard/components/workload_layout_spec.js b/spec/frontend/kubernetes_dashboard/components/workload_layout_spec.js
index 0f32bc3a291..68b7d7eed6a 100644
--- a/spec/frontend/kubernetes_dashboard/components/workload_layout_spec.js
+++ b/spec/frontend/kubernetes_dashboard/components/workload_layout_spec.js
@@ -1,4 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { GlLoadingIcon, GlAlert, GlDrawer } from '@gitlab/ui';
 import WorkloadLayout from '~/kubernetes_dashboard/components/workload_layout.vue';
 import WorkloadStats from '~/kubernetes_dashboard/components/workload_stats.vue';
@@ -97,10 +98,6 @@ describe('Workload layout component', () => {
       expect(findErrorAlert().exists()).toBe(false);
     });
 
-    it('renders workload-stats component with the correct props', () => {
-      expect(findWorkloadStats().props('stats')).toBe(mockPodStats);
-    });
-
     it('renders workload-table component with the correct props', () => {
       expect(findWorkloadTable().props('items')).toBe(mockPodsTableItems);
     });
@@ -109,6 +106,21 @@ describe('Workload layout component', () => {
       expect(findDrawer().exists()).toBe(true);
     });
 
+    describe('stats', () => {
+      it('renders workload-stats component with the correct props', () => {
+        expect(findWorkloadStats().props('stats')).toBe(mockPodStats);
+      });
+
+      it('filters items when receives a stat select event', async () => {
+        const status = 'Failed';
+        findWorkloadStats().vm.$emit('select', status);
+        await nextTick();
+
+        const filteredItems = mockPodsTableItems.filter((item) => item.status === status);
+        expect(findWorkloadTable().props('items')).toMatchObject(filteredItems);
+      });
+    });
+
     describe('drawer', () => {
       it('is closed by default', () => {
         expect(findDrawer().props('open')).toBe(false);
diff --git a/spec/frontend/kubernetes_dashboard/components/workload_stats_spec.js b/spec/frontend/kubernetes_dashboard/components/workload_stats_spec.js
index d1bee0c0a16..201d162b3dc 100644
--- a/spec/frontend/kubernetes_dashboard/components/workload_stats_spec.js
+++ b/spec/frontend/kubernetes_dashboard/components/workload_stats_spec.js
@@ -1,5 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import { GlSingleStat } from '@gitlab/ui/dist/charts';
+import { nextTick } from 'vue';
 import WorkloadStats from '~/kubernetes_dashboard/components/workload_stats.vue';
 import { mockPodStats } from '../graphql/mock_data';
 
@@ -40,4 +41,38 @@ describe('Workload stats component', () => {
       });
     },
   );
+
+  describe('selecting stat', () => {
+    it('selects stat on click and adds appropriate CSS class', async () => {
+      createWrapper();
+
+      findSingleStat(0).vm.$emit('click');
+      await nextTick();
+
+      expect(findSingleStat(0).classes()).toContain('gl-inset-border-b-2-blue-500');
+    });
+
+    it('deselects stat with the second click', async () => {
+      createWrapper();
+
+      findSingleStat(1).vm.$emit('click');
+      await nextTick();
+
+      expect(findSingleStat(1).classes()).toContain('gl-inset-border-b-2-blue-500');
+
+      findSingleStat(1).vm.$emit('click');
+      await nextTick();
+
+      expect(findSingleStat(1).classes()).not.toContain('gl-inset-border-b-2-blue-500');
+    });
+
+    it('emit a select event', async () => {
+      createWrapper();
+
+      findSingleStat(2).vm.$emit('click');
+      await nextTick();
+
+      expect(wrapper.emitted('select')).toEqual([[mockPodStats[2].title]]);
+    });
+  });
 });
diff --git a/yarn.lock b/yarn.lock
index e7bff42e2c0..9ed0ca6eba9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1331,10 +1331,10 @@
   resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-3.99.0.tgz#85d2752787c3a87d40d5468a797e67c1e736a9fc"
   integrity sha512-N1y2W8ti0Pw7N8UYUdcl7DQuIZfOcL0R85EzJlSgXLt+I0NdmX4s3CCqBV1g62ZDxLgfDqBfiLKLCcYz8JkJ8w==
 
-"@gitlab/ui@80.14.0":
-  version "80.14.0"
-  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-80.14.0.tgz#d489e037083c99da66c744e1030b86bc138da786"
-  integrity sha512-a+V6OhGAZ38091sDYfcvHnMip9H193UfufJBbNtczzsdv6UzC9Dnup3YWMtZTfjS60SBWtEZ2Ju8MVJH19/YhA==
+"@gitlab/ui@80.14.1":
+  version "80.14.1"
+  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-80.14.1.tgz#dcfdd5a3097b4fbf441dc5ac354399ea3736381e"
+  integrity sha512-TyVz6CaYyJCwskgWJEUpjfdmJKTWwgKTEWjZa2uf8wGNCjKDO5KlVWQdOtp7//sKZPSoBRbLZrzGJJGgX/Cc+w==
   dependencies:
     "@floating-ui/dom" "1.4.3"
     bootstrap-vue "2.23.1"