3 files changed, 17 insertions, 6 deletions
diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index 1e524882d5f..9bca555bf1d 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -441,7 +441,7 @@ export default {
             [CENTERED_LIMITED_CONTAINER_CLASSES]: isLimitedContainer,
           }"
         >
-          <commit-widget v-if="commit" :commit="commit" />
+          <commit-widget v-if="commit" :commit="commit" :collapsible="false" />
           <div v-if="isBatchLoading" class="loading"><gl-loading-icon size="lg" /></div>
           <template v-else-if="renderDiffFiles">
             <diff-file
diff --git a/app/assets/javascripts/diffs/components/commit_item.vue b/app/assets/javascripts/diffs/components/commit_item.vue
index 99bc1b5c040..f579b2ae2ba 100644
--- a/app/assets/javascripts/diffs/components/commit_item.vue
+++ b/app/assets/javascripts/diffs/components/commit_item.vue
@@ -56,6 +56,11 @@ export default {
       type: Object,
       required: true,
     },
+    collapsible: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
   computed: {
     author() {
@@ -104,7 +109,7 @@ export default {
 </script>
 
 <template>
-  <li class="commit flex-row js-toggle-container">
+  <li :class="{ 'js-toggle-container': collapsible }" class="commit flex-row">
     <user-avatar-link
       :link-href="authorUrl"
       :img-src="authorAvatar"
@@ -123,7 +128,7 @@ export default {
         <span class="commit-row-message d-block d-sm-none">&middot; {{ commit.short_id }}</span>
 
         <button
-          v-if="commit.description_html"
+          v-if="commit.description_html && collapsible"
           class="text-expander js-toggle-button"
           type="button"
           :aria-label="__('Toggle commit description')"
@@ -144,7 +149,8 @@ export default {
 
         <pre
           v-if="commit.description_html"
-          class="commit-row-description js-toggle-content gl-mb-3"
+          :class="{ 'js-toggle-content': collapsible, 'd-block': !collapsible }"
+          class="commit-row-description gl-mb-3 text-dark"
           v-html="commit.description_html"
         ></pre>
       </div>
diff --git a/app/assets/javascripts/diffs/components/commit_widget.vue b/app/assets/javascripts/diffs/components/commit_widget.vue
index 31ed003cc0f..5c7e84bd87c 100644
--- a/app/assets/javascripts/diffs/components/commit_widget.vue
+++ b/app/assets/javascripts/diffs/components/commit_widget.vue
@@ -23,15 +23,20 @@ export default {
       type: Object,
       required: true,
     },
+    collapsible: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
   },
 };
 </script>
 
 <template>
-  <div class="info-well w-100">
+  <div class="info-well mw-100 mx-0">
     <div class="well-segment">
       <ul class="blob-commit-info">
-        <commit-item :commit="commit" />
+        <commit-item :commit="commit" :collapsible="collapsible" />
       </ul>
     </div>
   </div>