Notes: Fix text wrapping for long usernames in collaboration sidebar

[amitraj2203]

What?

Closes #81403

Tagging a user with a long handle in a note no longer breaks the text layout, in the reply field or in the published comment.

Why?

The mention chip was set to never wrap (white-space: nowrap). The notes column is only ~214px wide, so a long handle makes the chip wider than the column. The note content clips its overflow, so the text isn't just squashed, it's cut off and unreadable.

How?

Two CSS changes in the collab sidebar stylesheet:

• .wp-note-mention — dropped white-space: nowrap and allowed it to breakwith overflow-wrap: anywhere, so a handle too long for the column wraps instead of overflowing.
• .editor-collab-sidebar-panel__note-content — added overflow-wrap: break-word, matching what the reply field already does.

Testing Instructions

1. Create a user with a long display name, e.g. userwithaloooooooonghandle.
2. Open a post that has a note on a block, and resolve that note.
3. Click the resolved note and choose "Reopen & Reply".
4. Type @, pick the long-handled user, then type some text after it,
   e.g. hello.
5. Submit the reply.

Before: the text is cut off at the right edge, both while typing and in the posted comment.
After: it wraps and stays fully visible.

Notes that were already saved in the broken state also display correctly again, without editing them.

Testing Instructions for Keyboard

1. Open the notes sidebar and focus the reply field.
2. Type @, use the arrow keys to move through the suggestions, Enter to pick one.
3. Type text, then Tab to the submit button and press Enter.
4. Confirm the mention and the text after it wrap and stay visible.

Screenshots or screencast

Before

before.mov

After

after.mov

Use of AI Tools

Used Claude Code to help track down the cause and test the fix locally. The change is two CSS lines, reviewed and tested by me.

[github-actions]

Size Change: +17 B (0%)

Total Size: 7.65 MB

📦 View Changed

Filename	Size	Change
build/styles/editor/style-rtl.css	31.5 kB	+4 B (+0.01%)
build/styles/editor/style-rtl.min.css	26.8 kB	+4 B (+0.01%)
build/styles/editor/style.css	31.6 kB	+4 B (+0.01%)
build/styles/editor/style.min.css	26.8 kB	+5 B (+0.02%)

_{compressed-size-action}

[amitraj2203]

Currently, after adding a username mention and pressing Enter, no space is added after the mention. This causes subsequent text to be appended directly to the username unless the user manually inserts a space. Can we add logic here to automatically insert a trailing space after a mention is selected?

gutenberg/packages/editor/src/components/collab-sidebar/note-mention-completer.tsx

Lines 62 to 66 in 7f43eaf

	value: (
	<span className={ `wp-note-mention user-${ user.id }` }>
	{ '@' + user.name }
	</span>
	),

value: (
	<>
		<span className={ `wp-note-mention user-${ user.id }` }>
			{ '@' + user.name }
		</span>{ ' ' }
	</>
),

[github-actions]

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: amitraj2203 <amitraj2203@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: jordesign <jordesign@git.wordpress.org>

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

[Mamaduka]

Currently, after adding a username mention and pressing Enter, no space is added after the mention.

That's intentional. No autocomplete adds a space after insertion. See the original issue for discussion.

[Mamaduka]

Thanks, @amitraj2203!

Should we also update .editor-collab-sidebar-panel__note-form [role="textbox"] to use overflow-wrap: break-word instead of legacy word-wrap: break-word?

When the description mentioned that you matched the property, it took me a moment to realize that one was using the legacy value.

[Mamaduka]

I think just dropping the white-space: nowrap; will have the same effect; at least, it works in my tests.

Also, what was the reason for using anywhere instead of break-word?

[amitraj2203]

Thanks for the review
You're right, dropping white-space: nowrap is enough, since the chip inherits overflow-wrap: break-word from .editor-collab-sidebar-panel__note-content. No real reason for anywhere over break-word they behave the same here, so I've removed it.

Also swapped the note form's legacy word-wrap for overflow-wrap so both rules match.

[adamsilverstein]

@Mamaduka does this need backporting to RC/7.1?

[Mamaduka]

It’s definitely a portable fix. But I’ll defer to @t-hamano regarding final call.

[t-hamano]

It is working well. It seems like it can be backported to 7.1.

[github-actions]

I just cherry-picked this PR to the wp/7.1 branch to get it included in the next release: eab71bc