diff --git a/app/assets/javascripts/diffs/components/commit_item.vue b/app/assets/javascripts/diffs/components/commit_item.vue
index a6e4a57a5189c47194367993eb9d4ac34e9f0b6a..e3bb8ddd3487a28f946926237c09114a7677142b 100644
--- a/app/assets/javascripts/diffs/components/commit_item.vue
+++ b/app/assets/javascripts/diffs/components/commit_item.vue
@@ -173,7 +173,7 @@ export default {
         v-if="commit.description_html"
         v-safe-html:[$options.safeHtmlConfig]="commitDescription"
         :class="{ 'js-toggle-content': collapsible, 'd-block': !collapsible }"
-        class="commit-row-description gl-mb-3 gl-text-body gl-white-space-pre-line"
+        class="commit-row-description gl-mb-3 gl-text-body gl-white-space-pre-wrap"
       ></pre>
     </div>
   </li>
diff --git a/app/assets/javascripts/repository/components/commit_info.vue b/app/assets/javascripts/repository/components/commit_info.vue
index b97a3934efdb4e3a94731a40e3278bdde907e499..4e6fb4fe26ac1cb5cd88579fdab534b68ff4fc8e 100644
--- a/app/assets/javascripts/repository/components/commit_info.vue
+++ b/app/assets/javascripts/repository/components/commit_info.vue
@@ -133,7 +133,7 @@ export default {
           v-if="commitDescription"
           v-safe-html:[$options.safeHtmlConfig]="commitDescription"
           :class="{ 'gl-display-block!': showDescription }"
-          class="commit-row-description gl-mb-3 gl-white-space-pre-line"
+          class="commit-row-description gl-mb-3 gl-white-space-pre-wrap"
         ></pre>
       </div>
       <div class="gl-flex-grow-1"></div>
diff --git a/app/views/projects/commits/_commit.html.haml b/app/views/projects/commits/_commit.html.haml
index db70d596679f7dacc0203519599e9500138d4774..57e260147e3a615f9b7392a41b5980dea34ad419 100644
--- a/app/views/projects/commits/_commit.html.haml
+++ b/app/views/projects/commits/_commit.html.haml
@@ -53,7 +53,7 @@
       = render_if_exists 'projects/commits/project_namespace', show_project_name: show_project_name, project: project
 
       - if commit.description?
-        %pre{ class: ["commit-row-description gl-mb-3 gl-white-space-pre-line", (collapsible ? "js-toggle-content" : "d-block")] }
+        %pre{ class: ["commit-row-description gl-mb-3 gl-white-space-pre-wrap", (collapsible ? "js-toggle-content" : "d-block")] }
           = preserve(markdown_field(commit, :description))
 
     .commit-actions.flex-row
diff --git a/ee/app/assets/javascripts/vue_merge_request_widget/components/ai_commit_message.vue b/ee/app/assets/javascripts/vue_merge_request_widget/components/ai_commit_message.vue
index 57e5a85b95e2c96a60456cbc97589c481d4056b3..7f2c90bb59eb3dec583e693a9f5224ee2ac3b891 100644
--- a/ee/app/assets/javascripts/vue_merge_request_widget/components/ai_commit_message.vue
+++ b/ee/app/assets/javascripts/vue_merge_request_widget/components/ai_commit_message.vue
@@ -140,7 +140,7 @@ export default {
       </template>
       <gl-skeleton-loader v-if="loadingCommitMessage" :width="250" :lines="4" />
       <template v-else>
-        <pre class="commit-row-description gl-mb-3 gl-white-space-pre-line js-toggle-content">
+        <pre class="commit-row-description gl-mb-3 gl-white-space-pre-wrap js-toggle-content">
           {{ commitMessage }}
         </pre>
         <user-feedback :event-name="$options.feedback.eventName" />
diff --git a/spec/frontend/repository/components/commit_info_spec.js b/spec/frontend/repository/components/commit_info_spec.js
index f868bc0623e498ece04c99e7c82ea2239f7ce98c..78da409b0db8e3a3b8246b8cfc098dd555659409 100644
--- a/spec/frontend/repository/components/commit_info_spec.js
+++ b/spec/frontend/repository/components/commit_info_spec.js
@@ -77,7 +77,7 @@ describe('Repository last commit component', () => {
 
     it('strips the first newline of the description', () => {
       expect(findCommitRowDescription().html()).toBe(
-        '<pre class="commit-row-description gl-mb-3 gl-white-space-pre-line">Update ADOPTERS.md</pre>',
+        '<pre class="commit-row-description gl-mb-3 gl-white-space-pre-wrap">Update ADOPTERS.md</pre>',
       );
     });