Resolve "Override squash commit message"

9 files changed, 359 insertions, 145 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/commit_edit.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/commit_edit.vue
new file mode 100644
index 00000000000..a38f25cce35
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/commit_edit.vue
@@ -0,0 +1,40 @@
+<script>
+export default {
+  props: {
+    value: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    inputId: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <li>
+    <div class="commit-message-editor">
+      <div class="d-flex flex-wrap align-items-center justify-content-between">
+        <label class="col-form-label" :for="inputId">
+          <strong>{{ label }}</strong>
+        </label>
+        <slot name="header"></slot>
+      </div>
+      <textarea
+        :id="inputId"
+        :value="value"
+        class="form-control js-gfm-input append-bottom-default commit-message-edit"
+        required="required"
+        rows="7"
+        @input="$emit('input', $event.target.value)"
+      ></textarea>
+      <slot name="checkbox"></slot>
+    </div>
+  </li>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/commit_message_dropdown.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/commit_message_dropdown.vue
new file mode 100644
index 00000000000..b3c1c0e329d
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/commit_message_dropdown.vue
@@ -0,0 +1,38 @@
+<script>
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlDropdown,
+    GlDropdownItem,
+  },
+  props: {
+    commits: {
+      type: Array,
+      required: true,
+      default: () => [],
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-dropdown
+      right
+      no-caret
+      text="Use an existing commit message"
+      variant="link"
+      class="mr-commit-dropdown"
+    >
+      <gl-dropdown-item
+        v-for="commit in commits"
+        :key="commit.short_id"
+        class="text-nowrap text-truncate"
+        @click="$emit('input', commit.message)"
+      >
+        <span class="monospace mr-2">{{ commit.short_id }}</span> {{ commit.title }}
+      </gl-dropdown-item>
+    </gl-dropdown>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue
new file mode 100644
index 00000000000..a1d3a09cca4
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue
@@ -0,0 +1,91 @@
+<script>
+import { GlButton } from '@gitlab/ui';
+import _ from 'underscore';
+import { __, n__, sprintf, s__ } from '~/locale';
+import Icon from '~/vue_shared/components/icon.vue';
+
+export default {
+  components: {
+    Icon,
+    GlButton,
+  },
+  props: {
+    isSquashEnabled: {
+      type: Boolean,
+      required: true,
+    },
+    commitsCount: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
+    targetBranch: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      expanded: false,
+    };
+  },
+  computed: {
+    collapseIcon() {
+      return this.expanded ? 'chevron-down' : 'chevron-right';
+    },
+    commitsCountMessage() {
+      return n__(__('%d commit'), __('%d commits'), this.isSquashEnabled ? 1 : this.commitsCount);
+    },
+    modifyLinkMessage() {
+      return this.isSquashEnabled ? __('Modify commit messages') : __('Modify merge commit');
+    },
+    ariaLabel() {
+      return this.expanded ? __('Collapse') : __('Expand');
+    },
+    message() {
+      return sprintf(
+        s__(
+          'mrWidgetCommitsAdded|%{commitCount} and %{mergeCommitCount} will be added to %{targetBranch}.',
+        ),
+        {
+          commitCount: `<strong class="commits-count-message">${this.commitsCountMessage}</strong>`,
+          mergeCommitCount: `<strong>${s__('mrWidgetCommitsAdded|1 merge commit')}</strong>`,
+          targetBranch: `<span class="label-branch">${_.escape(this.targetBranch)}</span>`,
+        },
+        false,
+      );
+    },
+  },
+  methods: {
+    toggle() {
+      this.expanded = !this.expanded;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div
+      class="js-mr-widget-commits-count mr-widget-extension clickable d-flex align-items-center px-3 py-2"
+      @click="toggle()"
+    >
+      <gl-button
+        :aria-label="ariaLabel"
+        variant="blank"
+        class="commit-edit-toggle mr-2"
+        @click.stop="toggle()"
+      >
+        <icon :name="collapseIcon" :size="16" />
+      </gl-button>
+      <span v-if="expanded">{{ __('Collapse') }}</span>
+      <span v-else>
+        <span v-html="message"></span>
+        <gl-button variant="link" class="modify-message-button">
+          {{ modifyLinkMessage }}
+        </gl-button>
+      </span>
+    </div>
+    <div v-show="expanded"><slot></slot></div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
index b8f29649eb5..ce4207864ea 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
@@ -2,17 +2,24 @@
 import successSvg from 'icons/_icon_status_success.svg';
 import warningSvg from 'icons/_icon_status_warning.svg';
 import simplePoll from '~/lib/utils/simple_poll';
+import { __ } from '~/locale';
 import MergeRequest from '../../../merge_request';
 import Flash from '../../../flash';
 import statusIcon from '../mr_widget_status_icon.vue';
 import eventHub from '../../event_hub';
 import SquashBeforeMerge from './squash_before_merge.vue';
+import CommitsHeader from './commits_header.vue';
+import CommitEdit from './commit_edit.vue';
+import CommitMessageDropdown from './commit_message_dropdown.vue';
 
 export default {
   name: 'ReadyToMerge',
   components: {
     statusIcon,
     SquashBeforeMerge,
+    CommitsHeader,
+    CommitEdit,
+    CommitMessageDropdown,
   },
   props: {
     mr: { type: Object, required: true },
@@ -22,27 +29,20 @@ export default {
     return {
       removeSourceBranch: this.mr.shouldRemoveSourceBranch,
       mergeWhenBuildSucceeds: false,
-      useCommitMessageWithDescription: false,
       setToMergeWhenPipelineSucceeds: false,
-      showCommitMessageEditor: false,
       isMakingRequest: false,
       isMergingImmediately: false,
       commitMessage: this.mr.commitMessage,
       squashBeforeMerge: this.mr.squash,
       successSvg,
       warningSvg,
+      squashCommitMessage: this.mr.squashCommitMessage,
     };
   },
   computed: {
     shouldShowMergeWhenPipelineSucceedsText() {
       return this.mr.isPipelineActive;
     },
-    commitMessageLinkTitle() {
-      const withDesc = 'Include description in commit message';
-      const withoutDesc = "Don't include description in commit message";
-
-      return this.useCommitMessageWithDescription ? withoutDesc : withDesc;
-    },
     status() {
       const { pipeline, isPipelineActive, isPipelineFailed, hasCI, ciStatus } = this.mr;
 
@@ -84,9 +84,9 @@ export default {
     },
     mergeButtonText() {
       if (this.isMergingImmediately) {
-        return 'Merge in progress';
+        return __('Merge in progress');
       } else if (this.shouldShowMergeWhenPipelineSucceedsText) {
-        return 'Merge when pipeline succeeds';
+        return __('Merge when pipeline succeeds');
       }
 
       return 'Merge';
@@ -98,7 +98,7 @@ export default {
       const { commitMessage } = this;
       return Boolean(
         !commitMessage.length ||
-          !this.shouldShowMergeControls() ||
+          !this.shouldShowMergeControls ||
           this.isMakingRequest ||
           this.mr.preventMerge,
       );
@@ -110,18 +110,14 @@ export default {
       const { commitsCount, enableSquashBeforeMerge } = this.mr;
       return enableSquashBeforeMerge && commitsCount > 1;
     },
-  },
-  methods: {
     shouldShowMergeControls() {
       return this.mr.isMergeAllowed || this.shouldShowMergeWhenPipelineSucceedsText;
     },
-    updateCommitMessage() {
-      const cmwd = this.mr.commitMessageWithDescription;
-      this.useCommitMessageWithDescription = !this.useCommitMessageWithDescription;
-      this.commitMessage = this.useCommitMessageWithDescription ? cmwd : this.mr.commitMessage;
-    },
-    toggleCommitMessageEditor() {
-      this.showCommitMessageEditor = !this.showCommitMessageEditor;
+  },
+  methods: {
+    updateMergeCommitMessage(includeDescription) {
+      const { commitMessageWithDescription, commitMessage } = this.mr;
+      this.commitMessage = includeDescription ? commitMessageWithDescription : commitMessage;
     },
     handleMergeButtonClick(mergeWhenBuildSucceeds, mergeImmediately) {
       // TODO: Remove no-param-reassign
@@ -139,6 +135,7 @@ export default {
         merge_when_pipeline_succeeds: this.setToMergeWhenPipelineSucceeds,
         should_remove_source_branch: this.removeSourceBranch === true,
         squash: this.squashBeforeMerge,
+        squash_commit_message: this.squashCommitMessage,
       };
 
       this.isMakingRequest = true;
@@ -158,7 +155,7 @@ export default {
         })
         .catch(() => {
           this.isMakingRequest = false;
-          new Flash('Something went wrong. Please try again.'); // eslint-disable-line
+          new Flash(__('Something went wrong. Please try again.')); // eslint-disable-line
         });
     },
     initiateMergePolling() {
@@ -194,7 +191,7 @@ export default {
           }
         })
         .catch(() => {
-          new Flash('Something went wrong while merging this merge request. Please try again.'); // eslint-disable-line
+          new Flash(__('Something went wrong while merging this merge request. Please try again.')); // eslint-disable-line
         });
     },
     initiateRemoveSourceBranchPolling() {
@@ -223,7 +220,7 @@ export default {
           }
         })
         .catch(() => {
-          new Flash('Something went wrong while deleting the source branch. Please try again.'); // eslint-disable-line
+          new Flash(__('Something went wrong while deleting the source branch. Please try again.')); // eslint-disable-line
         });
     },
   },
@@ -231,127 +228,136 @@ export default {
 </script>
 
 <template>
-  <div class="mr-widget-body media">
-    <status-icon :status="iconClass" />
-    <div class="media-body">
-      <div class="mr-widget-body-controls media space-children">
-        <span class="btn-group">
-          <button
-            :disabled="isMergeButtonDisabled"
-            :class="mergeButtonClass"
-            type="button"
-            class="qa-merge-button"
-            @click="handleMergeButtonClick()"
-          >
-            <i v-if="isMakingRequest" class="fa fa-spinner fa-spin" aria-hidden="true"></i>
-            {{ mergeButtonText }}
-          </button>
-          <button
-            v-if="shouldShowMergeOptionsDropdown"
-            :disabled="isMergeButtonDisabled"
-            type="button"
-            class="btn btn-sm btn-info dropdown-toggle js-merge-moment"
-            data-toggle="dropdown"
-            aria-label="Select merge moment"
-          >
-            <i class="fa fa-chevron-down qa-merge-moment-dropdown" aria-hidden="true"></i>
-          </button>
-          <ul
-            v-if="shouldShowMergeOptionsDropdown"
-            class="dropdown-menu dropdown-menu-right"
-            role="menu"
-          >
-            <li>
-              <a
-                class="merge_when_pipeline_succeeds qa-merge-when-pipeline-succeeds-option"
-                href="#"
-                @click.prevent="handleMergeButtonClick(true)"
-              >
-                <span class="media">
-                  <span class="merge-opt-icon" aria-hidden="true" v-html="successSvg"></span>
-                  <span class="media-body merge-opt-title">Merge when pipeline succeeds</span>
-                </span>
-              </a>
-            </li>
-            <li>
-              <a
-                class="accept-merge-request qa-merge-immediately-option"
-                href="#"
-                @click.prevent="handleMergeButtonClick(false, true)"
-              >
-                <span class="media">
-                  <span class="merge-opt-icon" aria-hidden="true" v-html="warningSvg"></span>
-                  <span class="media-body merge-opt-title">Merge immediately</span>
-                </span>
-              </a>
-            </li>
-          </ul>
-        </span>
-        <div class="media-body-wrap space-children">
-          <template v-if="shouldShowMergeControls()">
-            <label v-if="mr.canRemoveSourceBranch">
-              <input
-                id="remove-source-branch-input"
-                v-model="removeSourceBranch"
-                :disabled="isRemoveSourceBranchButtonDisabled"
-                class="js-remove-source-branch-checkbox"
-                type="checkbox"
-              />
-              Delete source branch
-            </label>
-
-            <!-- Placeholder for EE extension of this component -->
-            <squash-before-merge
-              v-if="shouldShowSquashBeforeMerge"
-              v-model="squashBeforeMerge"
-              :help-path="mr.squashBeforeMergeHelpPath"
-              :is-disabled="isMergeButtonDisabled"
-            />
-
-            <span v-if="mr.ffOnlyEnabled" class="js-fast-forward-message">
-              Fast-forward merge without a merge commit
-            </span>
+  <div>
+    <div class="mr-widget-body media">
+      <status-icon :status="iconClass" />
+      <div class="media-body">
+        <div class="mr-widget-body-controls media space-children">
+          <span class="btn-group">
             <button
-              v-else
               :disabled="isMergeButtonDisabled"
-              class="js-modify-commit-message-button btn btn-default btn-sm"
+              :class="mergeButtonClass"
               type="button"
-              @click="toggleCommitMessageEditor"
+              class="qa-merge-button"
+              @click="handleMergeButtonClick()"
             >
-              Modify commit message
+              <i v-if="isMakingRequest" class="fa fa-spinner fa-spin" aria-hidden="true"></i>
+              {{ mergeButtonText }}
             </button>
-          </template>
-          <template v-else>
-            <span class="bold js-resolve-mr-widget-items-message">
-              You can only merge once the items above are resolved
-            </span>
-          </template>
-        </div>
-      </div>
-      <div v-if="showCommitMessageEditor" class="prepend-top-default commit-message-editor">
-        <div class="form-group clearfix">
-          <label class="col-form-label" for="commit-message"> Commit message </label>
-          <div class="col-sm-10">
-            <div class="commit-message-container">
-              <div class="max-width-marker"></div>
-              <textarea
-                id="commit-message"
-                v-model="commitMessage"
-                class="form-control js-commit-message"
-                required="required"
-                rows="14"
-                name="Commit message"
-              ></textarea>
-            </div>
-            <p class="hint">
-              Try to keep the first line under 52 characters and the others under 72
-            </p>
-            <div class="hint">
-              <a href="#" @click.prevent="updateCommitMessage"> {{ commitMessageLinkTitle }} </a>
-            </div>
+            <button
+              v-if="shouldShowMergeOptionsDropdown"
+              :disabled="isMergeButtonDisabled"
+              type="button"
+              class="btn btn-sm btn-info dropdown-toggle js-merge-moment"
+              data-toggle="dropdown"
+              aria-label="Select merge moment"
+            >
+              <i class="fa fa-chevron-down qa-merge-moment-dropdown" aria-hidden="true"></i>
+            </button>
+            <ul
+              v-if="shouldShowMergeOptionsDropdown"
+              class="dropdown-menu dropdown-menu-right"
+              role="menu"
+            >
+              <li>
+                <a
+                  class="merge_when_pipeline_succeeds qa-merge-when-pipeline-succeeds-option"
+                  href="#"
+                  @click.prevent="handleMergeButtonClick(true)"
+                >
+                  <span class="media">
+                    <span class="merge-opt-icon" aria-hidden="true" v-html="successSvg"></span>
+                    <span class="media-body merge-opt-title">{{
+                      __('Merge when pipeline succeeds')
+                    }}</span>
+                  </span>
+                </a>
+              </li>
+              <li>
+                <a
+                  class="accept-merge-request qa-merge-immediately-option"
+                  href="#"
+                  @click.prevent="handleMergeButtonClick(false, true)"
+                >
+                  <span class="media">
+                    <span class="merge-opt-icon" aria-hidden="true" v-html="warningSvg"></span>
+                    <span class="media-body merge-opt-title">{{ __('Merge immediately') }}</span>
+                  </span>
+                </a>
+              </li>
+            </ul>
+          </span>
+          <div class="media-body-wrap space-children">
+            <template v-if="shouldShowMergeControls">
+              <label v-if="mr.canRemoveSourceBranch">
+                <input
+                  id="remove-source-branch-input"
+                  v-model="removeSourceBranch"
+                  :disabled="isRemoveSourceBranchButtonDisabled"
+                  class="js-remove-source-branch-checkbox"
+                  type="checkbox"
+                />
+                {{ __('Delete source branch') }}
+              </label>
+
+              <!-- Placeholder for EE extension of this component -->
+              <squash-before-merge
+                v-if="shouldShowSquashBeforeMerge"
+                v-model="squashBeforeMerge"
+                :help-path="mr.squashBeforeMergeHelpPath"
+                :is-disabled="isMergeButtonDisabled"
+              />
+            </template>
+            <template v-else>
+              <span class="bold js-resolve-mr-widget-items-message">
+                {{ __('You can only merge once the items above are resolved') }}
+              </span>
+            </template>
           </div>
         </div>
       </div>
     </div>
+    <template v-if="shouldShowMergeControls">
+      <div v-if="mr.ffOnlyEnabled" class="mr-fast-forward-message">
+        {{ __('Fast-forward merge without a merge commit') }}
+      </div>
+      <template v-else>
+        <commits-header
+          :is-squash-enabled="squashBeforeMerge"
+          :commits-count="mr.commitsCount"
+          :target-branch="mr.targetBranch"
+        >
+          <ul class="border-top content-list commits-list flex-list">
+            <commit-edit
+              v-if="squashBeforeMerge"
+              v-model="squashCommitMessage"
+              :label="__('Squash commit message')"
+              input-id="squash-message-edit"
+              squash
+            >
+              <commit-message-dropdown
+                slot="header"
+                v-model="squashCommitMessage"
+                :commits="mr.commits"
+              />
+            </commit-edit>
+            <commit-edit
+              v-model="commitMessage"
+              :label="__('Merge commit message')"
+              input-id="merge-message-edit"
+            >
+              <label slot="checkbox">
+                <input
+                  id="include-description"
+                  type="checkbox"
+                  @change="updateMergeCommitMessage($event.target.checked)"
+                />
+                {{ __('Include merge request description') }}
+              </label>
+            </commit-edit>
+          </ul>
+        </commits-header>
+      </template>
+    </template>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
index 57c4dfbe3b7..abbbe19c5ef 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue
@@ -315,7 +315,7 @@ export default {
         :endpoint="mr.testResultsPath"
       />
 
-      <div class="mr-widget-section">
+      <div class="mr-widget-section p-0">
         <component :is="componentName" :mr="mr" :service="service" />
 
         <section v-if="shouldRenderCollaborationStatus" class="mr-info-list mr-links">
diff --git a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
index 36cac230d9d..58363f632a9 100644
--- a/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
+++ b/app/assets/javascripts/vue_merge_request_widget/stores/mr_widget_store.js
@@ -42,6 +42,8 @@ export default class MergeRequestStore {
     this.mergePipeline = data.merge_pipeline || {};
     this.deployments = this.deployments || data.deployments || [];
     this.postMergeDeployments = this.postMergeDeployments || [];
+    this.commits = data.commits_without_merge_commits || [];
+    this.squashCommitMessage = data.default_squash_commit_message;
     this.initRebase(data);
 
     if (data.issues_links) {
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index cb449b642e7..c5c3b66438c 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -391,6 +391,11 @@ img.emoji {
 .flex-no-shrink { flex-shrink: 0; }
 .ws-initial { white-space: initial; }
 .overflow-auto { overflow: auto; }
+.d-flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 
 /** COMMON SIZING CLASSES **/
 .w-0 { width: 0; }
@@ -402,6 +407,10 @@ img.emoji {
 
 .min-height-0 { min-height: 0; }
 
+.w-3 { width: #{3 * $grid-size}; }
+
+.h-3 { width: #{3 * $grid-size}; }
+
 /** COMMON SPACING CLASSES **/
 .gl-pl-0 { padding-left: 0; }
 .gl-pl-1 { padding-left: #{0.5 * $grid-size}; }
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 7088a6f59dc..96dab609a13 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -243,6 +243,7 @@ $gl-padding-8: 8px;
 $gl-padding: 16px;
 $gl-padding-24: 24px;
 $gl-padding-32: 32px;
+$gl-padding-50: 50px;
 $gl-col-padding: 15px;
 $gl-input-padding: 10px;
 $gl-vert-padding: 6px;
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 38a7e199c6a..135730d71e9 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -38,9 +38,7 @@
 }
 
 .mr-widget-section {
-  .media {
-    align-items: center;
-  }
+  border-radius: $border-radius-default $border-radius-default 0 0;
 
   .code-text {
     flex: 1;
@@ -56,6 +54,11 @@
 .mr-widget-extension {
   border-top: 1px solid $border-color;
   background-color: $gray-light;
+
+  &.clickable:hover {
+    background-color: $gl-gray-200;
+    cursor: pointer;
+  }
 }
 
 .mr-widget-workflow {
@@ -78,6 +81,7 @@
   border-top: 0;
 }
 
+.mr-widget-body,
 .mr-widget-section,
 .mr-widget-content,
 .mr-widget-footer {
@@ -87,11 +91,38 @@
 .mr-state-widget {
   color: $gl-text-color;
 
+  .commit-message-edit {
+    border-radius: $border-radius-default;
+  }
+
   .mr-widget-section,
   .mr-widget-footer {
     border-top: solid 1px $border-color;
   }
 
+  .mr-fast-forward-message {
+    padding-left: $gl-padding-50;
+    padding-bottom: $gl-padding;
+  }
+
+  .commits-list {
+    > li {
+      padding: $gl-padding;
+
+      @include media-breakpoint-up(md) {
+        padding-left: $gl-padding-50;
+      }
+    }
+  }
+
+  .mr-commit-dropdown {
+    .dropdown-menu {
+      @include media-breakpoint-up(md) {
+        width: 150%;
+      }
+    }
+  }
+
   .mr-widget-footer {
     padding: 0;
   }
@@ -405,7 +436,7 @@
   }
 
   .mr-widget-help {
-    padding: 10px 16px 10px 48px;
+    padding: 10px 16px 10px $gl-padding-50;
     font-style: italic;
   }
 
@@ -423,10 +454,6 @@
   }
 }
 
-.mr-widget-body-controls {
-  flex-wrap: wrap;
-}
-
 .mr_source_commit,
 .mr_target_commit {
   margin-bottom: 0;