Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS overflow issue on editor post sidebar #20206

Closed
talldan opened this issue Feb 13, 2020 · 13 comments
Closed

CSS overflow issue on editor post sidebar #20206

talldan opened this issue Feb 13, 2020 · 13 comments
Labels
Browser Issues Issues or PRs that are related to browser specific problems General Interface Parts of the UI which don't fall neatly under other labels. [Type] Regression Related to a regression in the latest release

Comments

@talldan
Copy link
Contributor

talldan commented Feb 13, 2020

This bug was previously reported downstream in trac, https://core.trac.wordpress.org/ticket/49405. I've copied that report here.

Describe the bug
This issue only appear on trunk version.

In the editor,the right sidebar content doesn't fit into its parent, and provokes a x-axis overflow (see attached screenshot).


Editor sidebar on trunk
Screenshot_2020-02-11 Ajouter un nouvel article ‹ Justin Ahinon — WordPress(1)


Editor sidebar on 5.3.2
Screenshot_2020-02-11 Ajouter un nouvel article ‹ Lurking — WordPress


Adding some new details about the issue here:
I now notice the same behaviour on WordPress 5.4 beta 1.
It appears on Firefox Developer Edition 74.0beta.
The viewport is width=device-width,initial-scale=1.0.

@talldan talldan added General Interface Parts of the UI which don't fall neatly under other labels. Needs Testing Needs further testing to be confirmed. labels Feb 13, 2020
@tellthemachines
Copy link
Contributor

I can reproduce this issue on Firefox 73.0 (stable), whenever the sidebar is long enough to provoke a vertical scrollbar. Using latest development version of WP and latest Gutenberg.

@tellthemachines tellthemachines removed the Needs Testing Needs further testing to be confirmed. label Feb 13, 2020
@talldan talldan added [Type] Bug An existing feature does not function as intended [Type] Regression Related to a regression in the latest release and removed [Type] Bug An existing feature does not function as intended labels Feb 13, 2020
@talldan
Copy link
Contributor Author

talldan commented Feb 13, 2020

Adding this tentatively as a WP5.4 must have. I haven't quite been able to reproduce it, but judging from the info reported it seems like it may have been introduced recently.

@jorgefilipecosta
Copy link
Member

This issue seems hard to resolve, I tried lots of combinations of overflow-x, overflow-y, flex-grow, etc and ultimately I was not able to achieve to look we have in chrome.

In firefox, it seems the width of the element is computed without the scroll bar y when the scrollbar y is needed the width does not recompute and as the scroll bar y takes some space, a need for scrollbar x appears (instead I think the browser should have recomputed the width of the element as chrome does).
If we include something like "overflow-y: scroll" the problem does not happen but then we get the scroll bar always visible even if the scroll is not possible.
This seems like a browser bug to me.
@youknowriad, as it seems you worked around the layout structure in the past, do you have some insights (mainly to make sure I'm not missing a possible easy fix)?

@jorgefilipecosta jorgefilipecosta added the Browser Issues Issues or PRs that are related to browser specific problems label Feb 13, 2020
@youknowriad
Copy link
Contributor

We did some refactorings a few releases back to centralize all the canvas CSS in the EditorSkeleton component. It's probably related. Maybe @jasmussen already encountered this and have ideas about it.

@sybrew
Copy link

sybrew commented Feb 16, 2020

Reproducible with The SEO Framework plugin. You may need to slide the postbox to the sidebar via the Classic Editor before loading Gutenberg to see it.

image

The culprit is that the .poststuff class obtains the min-width styles from the postbox located beneath the editor. This min-width style is then shared with the sidebar.

This should resolve the issue:

.metabox-location-side .poststuff { min-width: unset }

During live-edits via the developer console, you may want to resize the window to invoke repainting.

Result:
image

Side note: I dislike the new padding/height of .hdnle/.handlediv it seems off.

@youknowriad
Copy link
Contributor

They recently renamed #poststuff to . poststuff in trunk but there are still some CSS selectors using #poststuff in Gutenberg, maybe this is related and could be fixed by fixing these selectors. cc @afercia

@jasmussen
Copy link
Contributor

This fixes it:

Screenshot 2020-02-17 at 11 03 01

That is:

  • .block-editor-editor-skeleton__sidebar gets overflow property removed
  • .block-editor-editor-skeleton__sidebar > div receives height: 100%;
  • .edit-post-sidebar receives overflow: auto;

But the > div is ugly and likely some necessary fragment. And the top-fixed tabs break (CC: @epiqueras I think we discussed this recently).

@epiqueras
Copy link
Contributor

Yeah, I raised an issue about the tabs not being fixed consistently between mobile and desktop.

@afercia
Copy link
Contributor

afercia commented Feb 17, 2020

@youknowriad I didn't follow the core change closely. I see the Trac ticket has been reopened because of some backwards compatibility concerns. Reference:
https://core.trac.wordpress.org/changeset/47222
https://core.trac.wordpress.org/ticket/46964

Best person to ask @audrasjb I guess 🙂

@jasmussen
Copy link
Contributor

This was fixed by #20355.

@epiqueras
Copy link
Contributor

🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉

@leadclown
Copy link

this bug still exist. can confirm i have a scrollbar on full hd (1920x1080) because of multiple elements which are not border-box.

please test multiple resolutions and devices before you mark bugs as completed!

@Louis7777
Copy link

Bug is still there.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Browser Issues Issues or PRs that are related to browser specific problems General Interface Parts of the UI which don't fall neatly under other labels. [Type] Regression Related to a regression in the latest release
Projects
None yet
Development

No branches or pull requests

10 participants