3.8 introduced the responsive admin - 3.9 broke it in some panels

[ramiy]

Yesterday i used my iPhone to edit my site, it seems like few screens are not responsive.

1. The "Permalink Settings" Screen "wp-admin/options-permalink.php" in RTL mode is not responsive. In LTR no problems but RTL has issues. I also checked with chrome emulation - looks ok. but on my phone it's broken.

2. The "Upload New Media" Screen ("wp-admin/media-new.php") broken after you upload files.

[ramiy]

The media upluad issue is in RTL and LTR sites.

[SergeyBiryukov]

Could you add screenshots for these issues?

[ramiy]

3 Permalink Settings Screenshots. LTR is ok, but RTL has horizontal scroll.

[rclations]

Re: 1. The "Permalink Settings" Screen

I can reproduce this using ​https://wordpress.org/plugins/rtl-tester/ and Chrome iPhone emulation.

In my testing this issue also appears in the LTR version and is caused by <code>​http://example.org/topics/uncategorized/</code> being too long and not wrapping.

What would be the preferred way to tackle this? Adding overflow:hidden to the parent element seems kind of universal and dirty. The only other option I can think of it setting code to inline-block and adding either overflow: hidden + ellipsis or scroll.

[rclations]

Patch fixes # 2 completely and gets # 1 about 80% of the way there.

Remaining:

• overflow:scroll on the <code> element moves it slightly and changes the line-height appearance (at least in Chrome). Not sure if there's an elegant solution for this. For now, I just wrapped these in a media query to minimize exposure.

• still some overflow issues on the <td> elements caused by padding. Is border-box used in core at all? Not sure how far back browser support goes here.

[ocean90]

Media upload should be fixed with [28830].

Moving out of 3.9.2 as this was broken in 3.8 too.

[ocean90]

In 29501:

Allow WebKit browsers to break strings in <code> tags.
This prevents an overflow for example on Permalink Settings.

fixes #28161.