Use `pre-wrap` to both preserve whitespace and wrap long lines

... in MR views that display commit messages.

Changelog: fixed

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>

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>

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

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" />

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>',
       );
     });