WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 20 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 22 months ago.
Increases breakpoint to collapse admin toolbar by 45px
23904.diff (418 bytes) - added by melchoyce 20 months ago.
23904.2.patch (662 bytes) - added by vinod dalvi 20 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 @jakemgold22 months ago

  • Cc jake@… added

Able to replicated in Safari 6.0.5.

Working on it.

comment:3 @jakemgold22 months ago

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

@jakemgold22 months ago

Increases breakpoint to collapse admin toolbar by 45px

comment:4 @jakemgold22 months ago

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

comment:5 @jakemgold22 months ago

  • Keywords has-patch added

comment:6 follow-up: @ocean9022 months ago

  • Keywords has-patch removed

The ticket is about the editor, not the toolbar.

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

comment:8 @jakemgold22 months ago

  • Keywords has-patch added

comment:9 @helen22 months ago

TinyMCE toolbar + admin menu :)

comment:10 in reply to: ↑ 7 @ocean9022 months 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 @jakemgold22 months ago

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

Version 0, edited 22 months ago by jakemgold (next)

comment:12 @helen22 months ago

#24719 was marked as a duplicate.

comment:13 @helen22 months 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 @helen22 months ago

  • Cc azaozz added

comment:15 @azaozz22 months 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 22 months ago by azaozz (previous) (diff)

comment:16 @alexvorn222 months ago

  • Cc alexvornoffice@… added

comment:17 @helen22 months ago

#25004 was marked as a duplicate.

comment:18 @vinod dalvi21 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 dalvi21 months ago

  • Cc mozillavvd@… added

@melchoyce20 months ago

comment:20 @melchoyce20 months ago

23904.diff changes the breakpoint to 950px.

comment:21 @nacin20 months ago

  • Keywords commit added

Seems good, can anyone confirm?

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

@vinod dalvi20 months ago

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