WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 5 years ago

#28161 closed defect (bug) (fixed)

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

Reported by: ramiy Owned by: ocean90
Milestone: 4.0 Priority: normal
Severity: normal Version: 3.9
Component: Administration Keywords: has-patch
Focuses: ui, rtl, administration Cc:
PR Number:

Description

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.
  1. The "Upload New Media" Screen ("wp-admin/media-new.php") broken after you upload files.

Attachments (10)

PermalinkSettings1.png (63.6 KB) - added by ramiy 6 years ago.
PermalinkSettings2.png (68.8 KB) - added by ramiy 6 years ago.
PermalinkSettings3.png (69.7 KB) - added by ramiy 6 years ago.
MediaUpload1.png (45.2 KB) - added by ramiy 6 years ago.
MediaUpload2.png (45.8 KB) - added by ramiy 6 years ago.
MediaUpload3.png (42.6 KB) - added by ramiy 6 years ago.
MediaUpload4.png (27.0 KB) - added by ramiy 6 years ago.
MediaUpload5.png (21.1 KB) - added by ramiy 6 years ago.
28161.patch (1.6 KB) - added by rclations 6 years ago.
28161.2.patch (338 bytes) - added by ocean90 5 years ago.

Download all attachments as: .zip

Change History (20)

#1 @ramiy
6 years ago

  • Summary changed from 3.8 intruduced the responcive admin - 3.9 brok it in some pannels to 3.8 introduced the responsive admin - 3.9 brok it in some panels

The media upluad issue is in RTL and LTR sites.

#2 @SergeyBiryukov
6 years ago

  • Component changed from General to Administration
  • Summary changed from 3.8 introduced the responsive admin - 3.9 brok it in some panels to 3.8 introduced the responsive admin - 3.9 broke it in some panels

Could you add screenshots for these issues?

#3 @ramiy
6 years ago

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

@ramiy
6 years ago

@ramiy
6 years ago

@ramiy
6 years ago

@ramiy
6 years ago

@ramiy
6 years ago

#4 @ramiy
6 years ago

  • Focuses rtl administration added

#5 @SergeyBiryukov
6 years ago

  • Milestone changed from Awaiting Review to 3.9.2

#6 @rclations
6 years ago

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
6 years ago

#7 @rclations
6 years ago

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.

#8 @ocean90
5 years ago

  • Milestone changed from 3.9.2 to 4.0

Media upload should be fixed with [28830].

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

@ocean90
5 years ago

#9 @stephdau
5 years ago

  • Keywords has-patch added

#10 @ocean90
5 years ago

  • Owner set to ocean90
  • Resolution set to fixed
  • Status changed from new to closed

In 29501:

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

fixes #28161.

Note: See TracTickets for help on using tickets.