diff --git a/app/assets/javascripts/comment_templates/components/list_item.vue b/app/assets/javascripts/comment_templates/components/list_item.vue
index eaf7b1cfde32b1271d3cad39d83d6d00900d0f4a..6b29321b47874302d89699b0247e18af577b3d45 100644
--- a/app/assets/javascripts/comment_templates/components/list_item.vue
+++ b/app/assets/javascripts/comment_templates/components/list_item.vue
@@ -94,7 +94,7 @@ export default {
         </gl-tooltip>
       </div>
     </div>
-    <div class="gl-font-monospace gl-white-space-pre-line gl-font-sm -gl-mt-5">
+    <div class="gl-font-monospace gl-whitespace-pre-line gl-font-sm -gl-mt-5">
       {{ template.content }}
     </div>
     <gl-modal
diff --git a/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue b/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue
index ded04bd24d49ff8d7c6ce50deaf767b332100a82..f71b18c398936e07fb6917c3753064625a16015f 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/suggestions.vue
@@ -177,7 +177,7 @@ export default {
 
 <template>
   <div>
-    <div class="flash-container js-suggestions-flash gl-white-space-pre-line"></div>
+    <div class="flash-container js-suggestions-flash gl-whitespace-pre-line"></div>
     <div
       v-show="isRendered"
       ref="container"
diff --git a/app/assets/javascripts/vue_shared/components/runner_instructions/instructions/runner_aws_instructions.vue b/app/assets/javascripts/vue_shared/components/runner_instructions/instructions/runner_aws_instructions.vue
index 8de160983292a7c5ec30432757ce806102be31c3..0d049e9e0b1d13b9b37940559094f87b6669ca4d 100644
--- a/app/assets/javascripts/vue_shared/components/runner_instructions/instructions/runner_aws_instructions.vue
+++ b/app/assets/javascripts/vue_shared/components/runner_instructions/instructions/runner_aws_instructions.vue
@@ -132,7 +132,7 @@ export default {
     <template v-if="registrationToken">
       <h5 class="gl-mb-3">{{ $options.i18n.runnerRegistrationToken }}</h5>
       <div class="gl-display-flex">
-        <pre class="gl-bg-gray gl-flex-grow-1 gl-white-space-pre-line">{{ registrationToken }}</pre>
+        <pre class="gl-bg-gray gl-flex-grow-1 gl-whitespace-pre-line">{{ registrationToken }}</pre>
         <modal-copy-button
           :title="$options.i18n.copyInstructions"
           :text="registrationToken"
diff --git a/app/assets/javascripts/vue_shared/components/runner_instructions/instructions/runner_cli_instructions.vue b/app/assets/javascripts/vue_shared/components/runner_instructions/instructions/runner_cli_instructions.vue
index 9685ec5058b501cc6474e7c66884db95188e0607..24ff101f34e082c42f0737fe1def34264e8d3db2 100644
--- a/app/assets/javascripts/vue_shared/components/runner_instructions/instructions/runner_cli_instructions.vue
+++ b/app/assets/javascripts/vue_shared/components/runner_instructions/instructions/runner_cli_instructions.vue
@@ -126,7 +126,7 @@ export default {
     <template v-if="instructions">
       <div class="gl-display-flex">
         <pre
-          class="gl-bg-gray gl-flex-grow-1 gl-white-space-pre-line"
+          class="gl-bg-gray gl-flex-grow-1 gl-whitespace-pre-line"
           data-testid="binary-instructions"
           >{{ instructions.installInstructions }}</pre
         >
@@ -141,7 +141,7 @@ export default {
       <h5 class="gl-mb-3">{{ $options.i18n.registerRunnerCommand }}</h5>
       <div class="gl-display-flex">
         <pre
-          class="gl-bg-gray gl-flex-grow-1 gl-white-space-pre-line"
+          class="gl-bg-gray gl-flex-grow-1 gl-whitespace-pre-line"
           data-testid="register-command"
           >{{ registerInstructionsWithToken }}</pre
         >
diff --git a/ee/app/assets/javascripts/security_orchestration/components/policy_editor/branch_selector_modal.vue b/ee/app/assets/javascripts/security_orchestration/components/policy_editor/branch_selector_modal.vue
index 1e63ab3ce3166b55e22f6a5082b7848388bb86be..53c2d79d1db1b38b260175442fc354cb96b90c13 100644
--- a/ee/app/assets/javascripts/security_orchestration/components/policy_editor/branch_selector_modal.vue
+++ b/ee/app/assets/javascripts/security_orchestration/components/policy_editor/branch_selector_modal.vue
@@ -221,7 +221,7 @@ export default {
     <p
       v-if="hasAsyncValidationError"
       data-testid="async-validation-error"
-      class="gl-my-2 gl-text-red-500 gl-white-space-pre-line"
+      class="gl-my-2 gl-text-red-500 gl-whitespace-pre-line"
     >
       <gl-sprintf :message="asyncValidationErrors">
         <template #bold="{ content }">
diff --git a/spec/frontend/comment_templates/components/__snapshots__/list_item_spec.js.snap b/spec/frontend/comment_templates/components/__snapshots__/list_item_spec.js.snap
index 672ac64c43bedee9677aef36b3e0fab572d600eb..fcb96083469081635c7f5cbe37c3fbc78b5c8783 100644
--- a/spec/frontend/comment_templates/components/__snapshots__/list_item_spec.js.snap
+++ b/spec/frontend/comment_templates/components/__snapshots__/list_item_spec.js.snap
@@ -111,7 +111,7 @@ exports[`Comment templates list item component renders list item 1`] = `
     </div>
   </div>
   <div
-    class="-gl-mt-5 gl-font-monospace gl-font-sm gl-white-space-pre-line"
+    class="-gl-mt-5 gl-font-monospace gl-font-sm gl-whitespace-pre-line"
   >
     /assign_reviewer
   </div>