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