WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 21 months 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 2 years ago.
wp-admin-css-breakpoint-toolbar.patch (420 bytes) - added by jakemgold 2 years ago.
Increases breakpoint to collapse admin toolbar by 45px
23904.diff (418 bytes) - added by melchoyce 21 months ago.
23904.2.patch (662 bytes) - added by vinod dalvi 21 months ago.

Download all attachments as: .zip

Change History (27)

comment:1 @SergeyBiryukov2 years ago

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

comment:2 @jakemgold2 years ago

  • Cc jake@… added

Able to replicated in Safari 6.0.5.

Working on it.

comment:3 @jakemgold2 years ago

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

@jakemgold2 years ago

Increases breakpoint to collapse admin toolbar by 45px

comment:4 @jakemgold2 years ago

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

comment:5 @jakemgold2 years ago

  • Keywords has-patch added

comment:6 follow-up: @ocean902 years ago

  • Keywords has-patch removed

The ticket is about the editor, not the toolbar.

comment:7 in reply to: ↑ 6 ; follow-up: @jakemgold2 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 2 years ago by jakemgold (previous) (diff)

comment:8 @jakemgold2 years ago

  • Keywords has-patch added

comment:9 @helen2 years ago

TinyMCE toolbar + admin menu :)

comment:10 in reply to: ↑ 7 @ocean902 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.

comment:11 @jakemgold2 years ago

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

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

comment:12 @helen2 years ago

#24719 was marked as a duplicate.

comment:13 @helen2 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?

comment:14 @helen2 years ago

  • Cc azaozz added

comment:15 @azaozz2 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 2 years ago by azaozz (previous) (diff)

comment:16 @alexvorn22 years ago

  • Cc alexvornoffice@… added

comment:17 @helen2 years ago

#25004 was marked as a duplicate.

comment:18 @vinod dalvi23 months ago

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

comment:19 @vinod dalvi23 months ago

  • Cc mozillavvd@… added

@melchoyce21 months ago

comment:20 @melchoyce21 months ago

23904.diff changes the breakpoint to 950px.

comment:21 @nacin21 months ago

  • Keywords commit added

Seems good, can anyone confirm?

comment:22 @vinod dalvi21 months 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 21 months ago by vinod dalvi (previous) (diff)

@vinod dalvi21 months ago

comment:23 @ocean9021 months 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.