diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index 1aca3c5cf1a..944996159d7 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -2,7 +2,6 @@
   background: none;
   border: 0;
   padding: 0;
-  margin-top: 10px;
   word-break: normal;
   white-space: pre-wrap;
 }
@@ -21,10 +20,6 @@
     margin: 0;
     color: $gl-text-color;
   }
-
-  .commit-description {
-    margin-top: 15px;
-  }
 }
 
 .commit-hash-full {
@@ -178,7 +173,7 @@
 .commit-detail {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: start;
   flex-grow: 1;
 }
 
@@ -268,20 +263,16 @@
 
   .commit-row-description {
     font-size: 14px;
-    padding: 10px 15px;
-    margin: 10px 0;
-    background: $gray-light;
+    padding: 0 0 0 $gl-padding-8;
+    border: 0;
     display: none;
     white-space: pre-wrap;
     word-break: normal;
-
-    pre {
-      border: 0;
-      background: inherit;
-      padding: 0;
-      margin: 0;
-      white-space: pre-wrap;
-    }
+    color: $gl-text-color-secondary;
+    background: none;
+    font-family: inherit;
+    border-left: 2px solid $theme-gray-300;
+    border-radius: unset;
 
     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 213c4c90a0e..1bffb3e8bf0 100644
--- a/app/views/projects/commit/_commit_box.html.haml
+++ b/app/views/projects/commit/_commit_box.html.haml
@@ -54,7 +54,7 @@
   %h3.commit-title
     = markdown_field(@commit, :title)
   - if @commit.description.present?
-    %pre.commit-description
+    .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 3fd0fa348b3..c390c9c4469 100644
--- a/app/views/projects/commits/_commit.html.haml
+++ b/app/views/projects/commits/_commit.html.haml
@@ -36,16 +36,16 @@
         - if commit.description?
           %button.text-expander.hidden-xs.js-toggle-button{ type: "button" } ...
 
-        - if commit.description?
-          %pre.commit-row-description.js-toggle-content
-            = preserve(markdown_field(commit, :description))
-
         .commiter
           - commit_author_link = commit_author_link(commit, avatar: false, size: 24)
           - commit_timeago = time_ago_with_tooltip(commit.authored_date, placement: 'bottom')
           - commit_text =  _('%{commit_author_link} authored %{commit_timeago}') % { commit_author_link: commit_author_link, commit_timeago: commit_timeago }
           #{ commit_text.html_safe }
 
+        - if commit.description?
+          %pre.commit-row-description.js-toggle-content.prepend-top-8.append-bottom-8
+            = preserve(markdown_field(commit, :description))
+
       .commit-actions.flex-row.hidden-xs
         - if request.xhr?
           = render partial: 'projects/commit/signature', object: commit.signature
diff --git a/app/views/projects/merge_requests/creations/_new_compare.html.haml b/app/views/projects/merge_requests/creations/_new_compare.html.haml
index 4e10511411f..773b12b4536 100644
--- a/app/views/projects/merge_requests/creations/_new_compare.html.haml
+++ b/app/views/projects/merge_requests/creations/_new_compare.html.haml
@@ -4,7 +4,7 @@
 = form_for [@project.namespace.becomes(Namespace), @project, @merge_request], url: project_new_merge_request_path(@project), method: :get, html: { class: "merge-request-form form-inline js-requires-input" } do |f|
   .hide.alert.alert-danger.mr-compare-errors
   .js-merge-request-new-compare.row{ 'data-source-branch-url': project_new_merge_request_branch_from_path(@source_project), 'data-target-branch-url': project_new_merge_request_branch_to_path(@source_project) }
-    .col-md-6
+    .col-lg-6
       .panel.panel-default.panel-new-merge-request
         .panel-heading
           Source branch
@@ -31,7 +31,7 @@
           .text-center= icon('spinner spin', class: 'js-source-loading')
           %ul.list-unstyled.mr_source_commit
 
-    .col-md-6
+    .col-lg-6
       .panel.panel-default.panel-new-merge-request
         .panel-heading
           Target branch
diff --git a/app/views/projects/pipelines/_info.html.haml b/app/views/projects/pipelines/_info.html.haml
index 85946aec1f2..9db30042bf4 100644
--- a/app/views/projects/pipelines/_info.html.haml
+++ b/app/views/projects/pipelines/_info.html.haml
@@ -5,7 +5,7 @@
     %h3.commit-title
       = markdown(@commit.title, pipeline: :single_line)
     - if @commit.description.present?
-      %pre.commit-description
+      .commit-description<
         = preserve(markdown(@commit.description, pipeline: :single_line))
 
   .info-well
diff --git a/changelogs/unreleased/improve-commit-message-body-rendering.yml b/changelogs/unreleased/improve-commit-message-body-rendering.yml
new file mode 100644
index 00000000000..3fb9b03725e
--- /dev/null
+++ b/changelogs/unreleased/improve-commit-message-body-rendering.yml
@@ -0,0 +1,5 @@
+---
+title: Improve commit message body rendering and fix responsive compare panels
+merge_request: 18725
+author: Constance Okoghenun
+type: changed