Fix MR ready to merge buttons/controls at mobile breakpoint

Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/37259

Conflicts:
	app/assets/stylesheets/pages/merge_requests.scss

app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js

@@ -214,8 +214,8 @@ export default {
     <div class="mr-widget-body media">
       <status-icon status="success" />
       <div class="media-body">
-        <div class="media space-children">
-          <span class="btn-group">
+        <div class="mr-widget-body-controls media space-children">
+          <span class="btn-group append-bottom-5">
             <button
               @click="handleMergeButtonClick()"
               :disabled="isMergeButtonDisabled"
@@ -272,7 +272,7 @@ export default {
               </li>
             </ul>
           </span>
-          <div class="media-body space-children">
+          <div class="media-body-wrap space-children">
             <template v-if="shouldShowMergeControls()">
               <label>
                 <input

app/assets/stylesheets/framework/media_object.scss

@@ -6,3 +6,7 @@
 .media-body {
   flex: 1;
 }
+
+.media-body-wrap {
+  flex-grow: 1;
+}

app/assets/stylesheets/pages/merge_requests.scss

@@ -342,6 +342,10 @@
   }
 }
 
+.mr-widget-body-controls {
+  flex-wrap: wrap;
+}
+
 .mr_source_commit,
 .mr_target_commit {
   margin-bottom: 0;

changelogs/unreleased/37259-some-mr-ready-mobile-fixes.yml

+---
+title: Fix MR ready to merge buttons/controls at mobile breakpoint
+merge_request: 14242
+author:
+type: fixed