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

Metaboxes shrink in-editor mobile preview pane height to un-viewable size #23404

Closed
claudiulodro opened this issue Jun 23, 2020 · 2 comments · Fixed by #24478
Closed

Metaboxes shrink in-editor mobile preview pane height to un-viewable size #23404

claudiulodro opened this issue Jun 23, 2020 · 2 comments · Fixed by #24478
Assignees
Labels
CSS Styling Related to editor and front end styles, CSS-specific issues. General Interface Parts of the UI which don't fall neatly under other labels. [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended

Comments

@claudiulodro
Copy link
Contributor

Describe the bug
When metaboxes are present, the in-editor mobile preview height shrinks down, often becoming unusable because it's so short.

To reproduce
Steps to reproduce the behavior:

  1. Add some plugins that use metaboxes (e.g. CoAuthors Plus and Yoast SEO). This issue is most noticeable with Yoast SEO, as their metabox is so huge.
  2. Click on Preview > Tablet or Preview > Mobile
  3. Observe the preview pane is just a thin sliver.
  4. Collapse the metaboxes using the little arrows. Observe the situation is better, but they are still squishing the pane somewhat.

Expected behavior
I think the mobile preview pane should be unnaffected by the presence of metaboxes, and should not get shorter by their presence.

Screenshots
Screen Shot 2020-06-23 at 1 33 06 PM
Screen Shot 2020-06-23 at 1 21 08 PM

Editor version (please complete the following information):

  • WordPress version: 5.4.2
  • Does the website has Gutenberg plugin installed, or is it using the block editor that comes by default? Gutenberg plugin
  • If the Gutenberg plugin is installed, which version is it? 8.3.0 (latest version at the time of this issue)

Desktop (please complete the following information):

  • OS: MacOS
  • Browser: Chrome
  • Version: 83.0.4103.106

Smartphone (please complete the following information):
n/a

Additional context

@talldan
Copy link
Contributor

talldan commented Aug 11, 2020

Seems to be caused by overflow-y: auto being applied to the wrapping element for the editor (.edit-post-visual-editor) when in the preview modes.

That overflow rule does seem necessary for making the post content scrollable, but I think the container could also do with a min-height to make it not collapse.

@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Aug 11, 2020
@talldan talldan added [Type] Bug An existing feature does not function as intended CSS Styling Related to editor and front end styles, CSS-specific issues. General Interface Parts of the UI which don't fall neatly under other labels. labels Aug 11, 2020
@afercia
Copy link
Contributor

afercia commented Aug 11, 2020

Noting this has also been reported on Trac: https://core.trac.wordpress.org/ticket/50819

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CSS Styling Related to editor and front end styles, CSS-specific issues. General Interface Parts of the UI which don't fall neatly under other labels. [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended
Projects
None yet
3 participants