[wp-trac] [WordPress Trac] #42724: Options Media page hides breaks on desktop

[WordPress Trac]

#42724: Options Media page hides breaks on desktop
-----------------------------+-----------------------------
 Reporter:  garrett-eclipse  |      Owner:
     Type:  defect (bug)     |     Status:  new
 Priority:  normal           |  Milestone:  Awaiting Review
Component:  Media            |    Version:  4.9
 Severity:  normal           |   Keywords:
  Focuses:                   |
-----------------------------+-----------------------------
 Hello,

 With 4.9 some css was introduced which is specific to the options-
 media.php and disables breaks on that page for desktop, and then they
 become visible on mobile.

 This broke the layout of Easy Fancybox and potentially other plugins that
 added content to the options-media page and any that had breaks in their
 code.

 Screen;
 https://i.imgur.com/Ccoe40P.png

 Ticket w/ Easy Fancybox - https://wordpress.org/support/topic/latest-
 loses-style-breaks-on-setting-page/
 *Developer worked around the issue in 1.6.2

 CSS of issue appears in wp-admin/css/common.css;


 {{{
 .options-media-php br {
         display: none;
 }

 @media screen and (max-width: 375px) {
         .options-media-php input[type="number"][name*="_size_"] {
                 margin: 5px 0;
         }
         .options-media-php label[for*="_size_h"]:before {
                 content: '';
                 display: block;
         }
         .options-media-php br {
                 display: block;
         }
 }
 }}}

 Reference:
 https://github.com/WordPress/WordPress/blob/f4e974057ea98ad98b1d8f7173f35bda2e5ef1c3
 /wp-admin/css/common.css#L3934

 I understand that's for responsive styling, but can a class of mobile-
 break be applied to <br> tags we want to have this css affect and then be
 more specific to avoid conflicts.

 Appreciated,
 Cheers

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