[wp-meta] [Making WordPress.org] #4888: Caption overflow in screenshots of plugin single page

[Making WordPress.org]

#4888: Caption overflow in screenshots of plugin single page
------------------------------+-----------------------------
 Reporter:  YordanSoares      |       Owner:  dufresnesteven
     Type:  defect            |      Status:  accepted
 Priority:  normal            |   Milestone:
Component:  Plugin Directory  |  Resolution:
 Keywords:                    |
------------------------------+-----------------------------
Changes (by dufresnesteven):

 * owner:  (none) => dufresnesteven
 * status:  new => accepted


Comment:

 In [attachment:"4888.diff"]:

 This diff sets the slide parent to `display: table-cell` and its parent to
 `display: table` . ([[https://caniuse.com/#feat=mdn-
 css_properties_display_table_values|Browser Support Chart]])

 **Why was it happening?**
 We have hardcoded values for the slide `max-height: 600px` and the image
 `max-height: 550px`. This was done to make sure large images didn't extend
 too far down the page and make the slider hard to use. If the captions
 would be larger than `50px`, it would hide under the bottom bounds of the
 slide.

 **Considerations**
 - I considered a JS solution where we could get references to the image
 and the caption to obtain the height and adjust the `max-height` property
 for the image but the JS (in part because its React) makes it a bit messy
 to gracefully store and read the DOM references.
 - We are also looking to replace the slider completely, so I didn't feel
 it necessary to invest too much time. See #2273.


 **Browser Test Matrix via BrowserStack**
 ||= Environment =|| Detail || Result || Notes ||
 || Win 10/8.1   ||  FF 68   ||  ✅ || ||
 || Win 10/8.1   ||  Opera 55   ||  ✅ || ||
 || Win 10/8.1   ||  Edge 15   ||  ✅ || ||
 || Win 10/8.1  ||  IE 11   ||  ❌ || Not a regression. Already exists. ||
 || Win 8  ||  IE 9/10   ||  ❌ || Not a regression. Already exists. ||
 || MacOS Catalina || Safari 13     ||  ✅ || ||
 || MacOS Sierra || Safari 10     ||  ✅ ||  ||
 || MacOS El Capitan || Safari 9     ||  ✅ ||  ||
 || iPhone 6 || Safari   ||  ✅ ||  ||
 || Android Galaxy 9  || Chrome   ||  ✅ ||  ||
 || Android Galaxy 6  || UC Browser   ||  ✅ ||  ||

-- 
Ticket URL: <https://meta.trac.wordpress.org/ticket/4888#comment:2>
Making WordPress.org <https://meta.trac.wordpress.org/>
Making WordPress.org