close
Skip to content

Fix: long unhyphenated text overflows the container#73711

Closed
Rishit30G wants to merge 2 commits intoWordPress:trunkfrom
Rishit30G:fix/long-unhyphenated-text-overflows-the-container
Closed

Fix: long unhyphenated text overflows the container#73711
Rishit30G wants to merge 2 commits intoWordPress:trunkfrom
Rishit30G:fix/long-unhyphenated-text-overflows-the-container

Conversation

@Rishit30G
Copy link
Contributor

What?

Fixes: #73707

Why?

This will help fix the issue where long, unhyphenated text overflows the container in the side panel where the author’s name appears.

Testing Instructions

To test in the post editor:

  • Create a new user for your test site with a really long username with no hyphens
  • Go to create a post and assign this post to that username
  • See how the username can overflow the container

Screenshots or screencast

Before After
image image

@github-actions
Copy link

github-actions bot commented Dec 3, 2025

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Rishit30G <rishit30g@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended [Package] Editor /packages/editor labels Dec 3, 2025
@Rishit30G
Copy link
Contributor Author

Added fix for Template and Discussion overflowing text in Post Editor

Before After
Screenshot 2025-12-04 at 12 05 24 PM Screenshot 2025-12-04 at 12 03 42 PM

padding: $grid-unit-10;
}

.components-dropdown-menu__toggle {
Copy link
Contributor

Choose a reason for hiding this comment

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

We shouldn't use classnames from the components package. Instead we should add a specific classname in toggleProps of post template panel.

Wondering though if this should also be added (not in this PR) for the dropdown menu toggle. --cc @mirka

Copy link
Member

Choose a reason for hiding this comment

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

Right, I think one could argue that this should be added to Button even.

I just noticed something wild though, which is that the non-default variants (e.g. primary) of Button have white-space: nowrap set, while the default variant does not 😅 I don't understand the reasoning for that choice, but in any case I think it'd be fine to add word-break: break-word to Button. It wouldn't affect variants that don't allow wrapping, and will result in better wrapping behavior for the variant that does allow it.

@t-hamano t-hamano added the General Interface Parts of the UI which don't fall neatly under other labels. label Dec 10, 2025
@ntsekouras
Copy link
Contributor

ntsekouras commented Mar 3, 2026

Thanks for the PR! Closing though since it was resolved by: #76071

@ntsekouras ntsekouras closed this Mar 3, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

General Interface Parts of the UI which don't fall neatly under other labels. [Package] Editor /packages/editor [Type] Bug An existing feature does not function as intended

Projects

None yet

Development

Successfully merging this pull request may close these issues.

DataViews / DataForm panel layout button: long unhyphenated text overflows the container

4 participants