Font Size Picker: Add truncation to header hint and adjust styles

[yogeshbhutkar]

What, Why & How?

When the hint text is too long, it overflows and disrupts the layout, as noted in the original issue. A potential solution was suggested in this comment. However, as mentioned, manipulating the height breaks the layout.

Ideally, excessively long hint text should be truncated to fit within the available space, ensuring it neither overflows nor causes layout inconsistencies.

This PR introduces text truncation to resolve the overflow issue. The full hint text remains accessible to users via tooltips on hover, offering a practical balance between usability and layout stability.

Testing Instructions

1. Add the following snippet to the theme.json.

"typography": {
	"defaultFontSizes": false,
	"fontSizes": [
		{
			"fluid": false,
			"name": "Small small small small small small small small small small small small small small small",
			"size": "0.875rem",
			"slug": "small"
		}
	]
}

2. Navigate to editing a page.
3. Notice the hint text overflow is now fixed.

Screenshots

Before	After

Layout

Screencast

Screen.Recording.2025-01-02.at.10.11.22.AM.mov

Closely related to: #68280

Closes: #68344

[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: yogeshbhutkar <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: snehapatil2001 <[email protected]>

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

[t-hamano]

There are two approaches to solving this problem:

• fontSizePicker header deisgn changes #68383
• (This PR) Font Size Picker: Add truncation to header hint and adjust styles #68452

It might be worth discussing which approach to take in more detail in #68344.