WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 3 years ago

#23904 closed defect (bug) (fixed)

CSS glitch when the browser window width isn't right

Reported by: Denis-de-Bernardy Owned by: ocean90
Milestone: 3.7 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-patch commit
Focuses: ui Cc:

Description

The post editor's layout now switches when the width of the window is narrow enough. But there's an intermediary zone, at least on Webkit/Safari where it's too narrow for the conditional CSS to kick in, yet too wide for the browser to deal with it. I presume, based on what I was working on a few minutes ago, that it's related to paddings.

Screenshot attached.

Attachments (4)

wp-admin-css-bug.png (142.5 KB) - added by Denis-de-Bernardy 4 years ago.
wp-admin-css-breakpoint-toolbar.patch (420 bytes) - added by jakemgold 3 years ago.
Increases breakpoint to collapse admin toolbar by 45px
23904.diff (418 bytes) - added by melchoyce 3 years ago.
23904.2.patch (662 bytes) - added by vinod dalvi 3 years ago.

Download all attachments as: .zip

Change History (27)

#1 @SergeyBiryukov
4 years ago

  • Component changed from General to Administration
  • Keywords ui-focus added

#2 @jakemgold
3 years ago

  • Cc jake@… added

Able to replicated in Safari 6.0.5.

Working on it.

#3 @jakemgold
3 years ago

Also: only happens when a second, longer editor toolbar is open.

@jakemgold
3 years ago

Increases breakpoint to collapse admin toolbar by 45px

#4 @jakemgold
3 years ago

Attached a patch that increases the first break point to accommodate the width of the second toolbar

#5 @jakemgold
3 years ago

  • Keywords has-patch added

#6 follow-up: @ocean90
3 years ago

  • Keywords has-patch removed

The ticket is about the editor, not the toolbar.

#7 in reply to: ↑ 6 ; follow-up: @jakemgold
3 years ago

Replying to ocean90:

The ticket is about the editor, not the toolbar.

Read the patch and notes above... The cause of the problem is the toolbar.

Last edited 3 years ago by jakemgold (previous) (diff)

#8 @jakemgold
3 years ago

  • Keywords has-patch added

#9 @helen
3 years ago

TinyMCE toolbar + admin menu :)

#10 in reply to: ↑ 7 @ocean90
3 years ago

  • Milestone changed from Awaiting Review to 3.7

Replying to jakemgold:

Read the patch and notes above... The cause of the problem is the toolbar.

I'm sorry, just noticed that with toolbar you mean the admin menu and probably the toolbar of TinyMCE.

#11 @jakemgold
3 years ago

No problem. However - any reason to hold such a small patch for 3.7?

Version 0, edited 3 years ago by jakemgold (next)

#12 @helen
3 years ago

#24719 was marked as a duplicate.

#13 @helen
3 years ago

Been digging into this, because I specifically remember it getting fixed once upon a time. According to #19434, the minimum width is about 950px, but for some reason it's now 900 after [20749] when it moved from JS to CSS. azaozz - any reason why it's not 945-950 or so?

#14 @helen
3 years ago

  • Cc azaozz added

#15 @azaozz
3 years ago

...any reason why it's not 945-950 or so?

Thinking we should review the trigger width for switching from two columns to one on the Edit Post screen. The user can disable folding the menu so switching to one column should probably happen earlier.

Last edited 3 years ago by azaozz (previous) (diff)

#16 @alexvorn2
3 years ago

  • Cc alexvornoffice@… added

#17 @helen
3 years ago

#25004 was marked as a duplicate.

#18 @vinod dalvi
3 years ago

The patch / wp-admin-css-breakpoint-toolbar.patch​ does not fix bug properly and breaks on browser window size 968px X 768px.

#19 @vinod dalvi
3 years ago

  • Cc mozillavvd@… added

@melchoyce
3 years ago

#20 @melchoyce
3 years ago

23904.diff changes the breakpoint to 950px.

#21 @nacin
3 years ago

  • Keywords commit added

Seems good, can anyone confirm?

#22 @vinod dalvi
3 years ago

The patch http://core.trac.wordpress.org/attachment/ticket/23904/23904.diff breaks in between viewport size 951px to 958px.

The new patch( 23904.2.patch​ ) added to fix it.

Last edited 3 years ago by vinod dalvi (previous) (diff)

@vinod dalvi
3 years ago

#23 @ocean90
3 years ago

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

In 25688:

Post UI: Increase the trigger width for switching from two columns to one.

props melchoyce, vinod dalvi.
fixes #23904.

Note: See TracTickets for help on using tickets.