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

Edit Post: Increase top toolbar breakpoint to avoid overflows in the header. #19442

Merged
merged 1 commit into from
Jan 7, 2020

Conversation

epiqueras
Copy link
Contributor

Description

The top toolbar's breakpoint for going from a second line in the header to a single one was too small, and content overflowed. This PR increases it.

How has this been tested?

The header no longer overflows around 1100 pixels viewport width.

Screenshots

Screen Shot 2020-01-06 at 3 42 57 PM

Types of Changes

Bug Fix: The header's top toolbar no longer overflows content on some screen sizes.

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR. .

@epiqueras epiqueras added [Type] Bug An existing feature does not function as intended [Priority] High Used to indicate top priority items that need quick attention labels Jan 6, 2020
@epiqueras epiqueras added this to the Gutenberg 7.2 milestone Jan 6, 2020
@epiqueras epiqueras self-assigned this Jan 6, 2020
Copy link
Member

@jorgefilipecosta jorgefilipecosta left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was able to replicate this problem on master, and I verified this PR fixes it 👍

@@ -54,7 +54,7 @@
}

// Move toolbar into top Editor Bar.
@include break-xlarge {
@include break-wide {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel like we keep increasing this breakpoint so it feels like no matter the value used, there will be overflow at some point. I wonder if there's another way to fix this. Maybe a menu that wraps when it hits the limit.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The toolbar should collapse into a menu, yes.

@epiqueras epiqueras merged commit 347c523 into master Jan 7, 2020
@epiqueras epiqueras deleted the fix/top-toolbar-breakpoint branch January 7, 2020 14:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Priority] High Used to indicate top priority items that need quick attention [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants