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

Large font sizes break the appearance of the preset sizes dropdown #25862

Closed
kjellr opened this issue Oct 6, 2020 · 2 comments · Fixed by #26705
Closed

Large font sizes break the appearance of the preset sizes dropdown #25862

kjellr opened this issue Oct 6, 2020 · 2 comments · Fixed by #26705
Assignees
Labels
[Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended

Comments

@kjellr
Copy link
Contributor

kjellr commented Oct 6, 2020

Describe the bug

If a theme provides very large font sizes as presets, it breaks the appearance of the preset size dropdown.

To reproduce
Steps to reproduce the behavior:

  1. Use a theme that provides a large font size (96, for example).
  2. Use the preset sizes dropdown.
  3. Notice the overflow.

Expected behavior

Font size representations there should be capped to a size that prevents them from overflowing their container.

Screenshots

Screen Shot 2020-10-06 at 10 04 54 AM

Gutenberg 9.1.0
Discovered while building the Twenty Twenty One Theme.

@kjellr kjellr added the [Type] Bug An existing feature does not function as intended label Oct 6, 2020
@aristath
Copy link
Member

aristath commented Oct 6, 2020

Ideally I'd say they shouldn't even have a preview... a simple drop down with the labels would work fine and won't break if the font sizes are not defined in pixels (I actually came across this while building an FSE theme).
Everything breaks if the font-size is something like a calc() containing a css var

@kjellr
Copy link
Contributor Author

kjellr commented Oct 6, 2020

A couple quick ideas:

At the very least, we can set overflow-y to hidden on these fields. That'll improve the appearance somewhat:

Screen Shot 2020-10-06 at 11 45 53 AM

Alternatively, when we set the inline value, instead of setting the value directly, we could use something like min(32px, [actual value]). to ensure that even if the value is huge, it'll max out at a reasonable size:

Screen Shot 2020-10-06 at 11 52 08 AM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants