Media Grid View: Modals cut pictures off in Firefox

[mikeyarce]

In the Media Library Grid View, when you click on an image, a modal pops up with the image information details and thumbnail. In Firefox, the image width overflows the container.

Example:

Steps to reproduce:

1. Download the latest version of trunk
2. Open the Media Library in FIrefox
3. Click on an image (make sure it's a fairly large image to begin with)
4. You will see the image overflows it's container.

Issue replicated on Firefox 25, 26, 27, 28, 29 and 30 and IE 9, 10, 11 (both Mac and PC)
Does not happen on Chrome or Safari

I had a look at the CSS and it looks like the issue is happening because of a problem with max-width not being set properly for Firefox. I made 2 changes that fixed the issue and now the images are also responsive to their containers which looks even better in mobile devices.

I've attached my patch to this ticket.

Once the patch is applied, here's what it looks like:

On a small device:

[helen]

We need to figure out something better for the size of the image and probably what info is displayed over there in general (perhaps none at all besides the image), but adding this for now to make it acceptable for beta.

[helen]

In 29055:

Better styling for the larger image preview in the attachment details modal. Portrait images still have problems in Firefox due to percentage height. props mikeyarce for the initial patch. see #28800, #24716.

[ocean90]

Related: #28844

[helen]

Fixed in [29204].