diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index ebbac00460c..48e799ffaf9 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -1,9 +1,17 @@
-.commit-description {
-  background: none;
+%commit-description-base {
+  padding: 0 0 0 $gl-padding-8;
+  margin-top: $gl-padding-8;
   border: 0;
-  padding: 0;
+  border-radius: unset;
+  background: none;
   word-break: normal;
-  white-space: pre-wrap;
+  overflow-x: auto;
+  border-left: 2px solid $theme-gray-300;
+  color: $gl-text-color-secondary;
+}
+
+.commit-description {
+  @extend %commit-description-base;
 }
 
 .js-details-expand {
@@ -175,6 +183,7 @@
   justify-content: space-between;
   align-items: start;
   flex-grow: 1;
+  min-width: 0;
 
   .project_namespace {
     color: $gl-text-color-secondary;
@@ -184,6 +193,7 @@
 .commit-content {
   padding-right: 10px;
   white-space: normal;
+  overflow: hidden;
 
   .commit-title {
     display: flex;
@@ -274,17 +284,9 @@
   }
 
   .commit-row-description {
-    font-size: 14px;
-    padding: 0 0 0 $gl-padding-8;
-    border: 0;
+    @extend %commit-description-base;
     display: none;
-    white-space: pre-wrap;
-    word-break: normal;
-    color: $gl-text-color-secondary;
-    background: none;
-    font-family: inherit;
-    border-left: 2px solid $theme-gray-300;
-    border-radius: unset;
+    flex: 1;
 
     a {
       color: $gl-text-color;
diff --git a/app/views/projects/commit/_commit_box.html.haml b/app/views/projects/commit/_commit_box.html.haml
index 8afbbaf378f..aab5712d197 100644
--- a/app/views/projects/commit/_commit_box.html.haml
+++ b/app/views/projects/commit/_commit_box.html.haml
@@ -55,7 +55,7 @@
   %h3.commit-title
     = markdown_field(@commit, :title)
   - if @commit.description.present?
-    .commit-description<
+    %pre.commit-description<
       = preserve(markdown_field(@commit, :description))
 
 .info-well
diff --git a/app/views/projects/commits/_commit.html.haml b/app/views/projects/commits/_commit.html.haml
index feaf44e8c0a..7951a5ddc9e 100644
--- a/app/views/projects/commits/_commit.html.haml
+++ b/app/views/projects/commits/_commit.html.haml
@@ -44,7 +44,7 @@
           #{ commit_text.html_safe }
 
         - if commit.description?
-          %pre.commit-row-description.js-toggle-content.prepend-top-8.append-bottom-8
+          %pre.commit-row-description.js-toggle-content.append-bottom-8
             = preserve(markdown_field(commit, :description))
 
       .commit-actions.flex-row.d-none.d-sm-flex
diff --git a/app/views/projects/pipelines/_info.html.haml b/app/views/projects/pipelines/_info.html.haml
index 78e3b209686..ccb83148ded 100644
--- a/app/views/projects/pipelines/_info.html.haml
+++ b/app/views/projects/pipelines/_info.html.haml
@@ -2,7 +2,7 @@
   %h3.commit-title
     = markdown(commit.title, pipeline: :single_line)
   - if commit.description.present?
-    .commit-description<
+    %pre.commit-description<
       = preserve(markdown(commit.description, pipeline: :single_line))
 
 .info-well
diff --git a/changelogs/unreleased/47548-monospace-commit-messages.yml b/changelogs/unreleased/47548-monospace-commit-messages.yml
new file mode 100644
index 00000000000..7344f72207b
--- /dev/null
+++ b/changelogs/unreleased/47548-monospace-commit-messages.yml
@@ -0,0 +1,5 @@
+---
+title: Update commit message styles with monospace font and overflow-x
+merge_request: 20988
+author:
+type: changed