[wp-trac] [WordPress Trac] #28800: Media Grid view Modals cut pictures off in Firefox

[WordPress Trac]

#28800: Media Grid view Modals cut pictures off in Firefox
--------------------------+-----------------------------
 Reporter:  mikeyarce     |      Owner:
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Media         |    Version:  trunk
 Severity:  normal        |   Keywords:
  Focuses:                |
--------------------------+-----------------------------
 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:
 [[Image(https://mikeyarce.files.wordpress.com/2014/07/screen-
 shot-2014-07-09-at-7-33-29-am.png)]]

 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:

 [[Image(https://mikeyarce.files.wordpress.com/2014/07/screen-
 shot-2014-07-09-at-7-54-33-am.png)]]

 On a small device:
 [[Image(https://mikeyarce.files.wordpress.com/2014/07/screen-
 shot-2014-07-09-at-7-55-38-am.png)]]

--
Ticket URL: <https://core.trac.wordpress.org/ticket/28800>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform