From 42d2dfad8f8c4c82d40ad5a300ebb8d0ab9d6a7a Mon Sep 17 00:00:00 2001
From: Eric Eastwood <contact@ericeastwood.com>
Date: Tue, 12 Sep 2017 21:08:58 -0500
Subject: Fix MR ready to merge buttons/controls at mobile breakpoint

Fix https://gitlab.com/gitlab-org/gitlab-ce/issues/37259
---
 .../components/states/mr_widget_ready_to_merge.js                   | 6 +++---
 app/assets/stylesheets/framework/media_object.scss                  | 4 ++++
 app/assets/stylesheets/pages/merge_requests.scss                    | 4 ++++
 changelogs/unreleased/37259-some-mr-ready-mobile-fixes.yml          | 5 +++++
 4 files changed, 16 insertions(+), 3 deletions(-)
 create mode 100644 changelogs/unreleased/37259-some-mr-ready-mobile-fixes.yml

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
index 65187754009..1fb7150d20e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
@@ -202,8 +202,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"
@@ -260,7 +260,7 @@ export default {
               </li>
             </ul>
           </span>
-          <div class="media-body space-children">
+          <div class="media-body-wrap space-children">
             <template v-if="isMergeAllowed()">
               <label>
                 <input
diff --git a/app/assets/stylesheets/framework/media_object.scss b/app/assets/stylesheets/framework/media_object.scss
index b573052c14a..89c561479cc 100644
--- a/app/assets/stylesheets/framework/media_object.scss
+++ b/app/assets/stylesheets/framework/media_object.scss
@@ -6,3 +6,7 @@
 .media-body {
   flex: 1;
 }
+
+.media-body-wrap {
+  flex-grow: 1;
+}
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 439636fe026..09a14578dd3 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -356,6 +356,10 @@
   }
 }
 
+.mr-widget-body-controls {
+  flex-wrap: wrap;
+}
+
 .mr_source_commit,
 .mr_target_commit {
   margin-bottom: 0;
diff --git a/changelogs/unreleased/37259-some-mr-ready-mobile-fixes.yml b/changelogs/unreleased/37259-some-mr-ready-mobile-fixes.yml
new file mode 100644
index 00000000000..a00a41f567f
--- /dev/null
+++ b/changelogs/unreleased/37259-some-mr-ready-mobile-fixes.yml
@@ -0,0 +1,5 @@
+---
+title: Fix MR ready to merge buttons/controls at mobile breakpoint
+merge_request: 14242
+author:
+type: fixed
-- 
cgit v1.2.1