Merge branch '17676-merge-request-widget-alignment' into 'master'

MR widget mobile styling

## What does this MR do?

Corrects MR widget styling for mobile viewing.

## Are there points in the code the reviewer needs to double check?

I have tested all MR states.

## Why was this MR needed?

UX.

## What are the relevant issue numbers?

Closes #17676.

## Screenshots (if relevant)

![Screen_Shot_2016-05-31_at_20.04.02](/uploads/b1bc67b1015b2e771ae1b1364b225618/Screen_Shot_2016-05-31_at_20.04.02.png)![Screen_Shot_2016-05-31_at_20.03.50](/uploads/86a552c0d27d6f53cdf1b94631b26449/Screen_Shot_2016-05-31_at_20.03.50.png)![Screen_Shot_2016-05-31_at_20.03.34](/uploads/a5b9e7b634e974095922df9194d493b5/Screen_Shot_2016-05-31_at_20.03.34.png)![Screen_Shot_2016-05-31_at_20.01.35](/uploads/2fc5d49e3c1f2ff2cb324e9527179066/Screen_Shot_2016-05-31_at_20.01.35.png)![Screen_Shot_2016-05-31_at_20.00.25](/uploads/23af913891ff941dc5231872b3c6f177/Screen_Shot_2016-05-31_at_20.00.25.png)![Screen_Shot_2016-05-31_at_19.59.53](/uploads/8abb72609409ba7ca02ad6b35787c15c/Screen_Shot_2016-05-31_at_19.59.53.png)![Screen_Shot_2016-05-31_at_19.58.31](/uploads/fabf1c6c135f5e736614e568fc4cfb53/Screen_Shot_2016-05-31_at_19.58.31.png)![Screen_Shot_2016-05-31_at_19.58.51](/uploads/967a578a34cb3a9dd3723c2f22ce89c4/Screen_Shot_2016-05-31_at_19.58.51.png)![Screen_Shot_2016-05-31_at_23.33.19](/uploads/841af7a90bb3fc3c74a2e51b64fc444f/Screen_Shot_2016-05-31_at_23.33.19.png)![Screen_Shot_2016-05-31_at_23.33.23](/uploads/183fb8407c271d9aa3fefea5d8201238/Screen_Shot_2016-05-31_at_23.33.23.png)

See merge request !4386

1 files changed, 24 insertions, 1 deletions

diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 4f8a8748d3f..8046e203a99 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -41,7 +41,7 @@
       margin: 0;
       margin-left: 20px;
       padding: 5px;
-      padding-top: 12px;
+      padding-top: 8px;
       line-height: 20px;
 
       &.right {
@@ -110,6 +110,29 @@
     p:last-child {
       margin-bottom: 0;
     }
+
+    @media (max-width: $screen-sm-max) {
+      h4 {
+        font-size: 15px;
+      }
+
+      p {
+        font-size: 13px;
+      }
+
+      .btn,
+      .btn-group,
+      .accept-action {
+        width: 100%;
+        margin-bottom: 4px;
+      }
+
+      .accept-control {
+        width: 100%;
+        text-align: center;
+        margin: 0;
+      }
+    }
   }
 
   .mr-widget-footer {