WordPress.org

Make WordPress Core

Opened 2 years ago

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

  • Cc jake@… added

Able to replicated in Safari 6.0.5.

Working on it.

comment:3 @jakemgold21 months ago

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

@jakemgold21 months ago

Increases breakpoint to collapse admin toolbar by 45px

comment:4 @jakemgold21 months ago

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

comment:5 @jakemgold21 months ago

  • Keywords has-patch added

comment:6 follow-up: @ocean9021 months ago

  • Keywords has-patch removed

The ticket is about the editor, not the toolbar.

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

comment:8 @jakemgold21 months ago

  • Keywords has-patch added

comment:9 @helen21 months ago

TinyMCE toolbar + admin menu :)

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

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

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

comment:12 @helen21 months ago

#24719 was marked as a duplicate.

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

  • Cc azaozz added

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

comment:16 @alexvorn221 months ago

  • Cc alexvornoffice@… added

comment:17 @helen21 months ago

#25004 was marked as a duplicate.

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

  • Cc mozillavvd@… added

@melchoyce19 months ago

comment:20 @melchoyce19 months ago

23904.diff changes the breakpoint to 950px.

comment:21 @nacin19 months ago

  • Keywords commit added

Seems good, can anyone confirm?

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

@vinod dalvi19 months ago

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