Components: Fix ToggleGroupControl label overflow for long translations

[jorgefilipecosta]

Fixes #38241
Fixes the ToggleGroupControl component's label overflow issue when translations are longer than the English version.

When using WordPress in languages with longer translations (e.g., German), the legend/label text of ToggleGroupControl components overflows its container instead of truncating. This affects typography controls like "Letter case" (Text Transform) in the block editor sidebar.
It is inconsistent with how other labels are handled

Before

After

(Notice in the after Letter Spacing and Decoration are handled in the same way, in the before image there is an inconsistency).

How?

Add text truncation styles (overflow: hidden, text-overflow: ellipsis, white-space: nowrap) to the VisualLabelWrapper's child element in the ToggleGroupControl component. This ensures long labels are truncated with an ellipsis, matching the behavior of other labels

Testing Instructions

• Apply the following patch:

diff --git a/packages/block-editor/src/components/text-decoration-control/index.js b/packages/block-editor/src/components/text-decoration-control/index.js
index f0f4525491e..909fa8530d1 100644
--- a/packages/block-editor/src/components/text-decoration-control/index.js
+++ b/packages/block-editor/src/components/text-decoration-control/index.js
@@ -49,9 +49,9 @@ export default function TextDecorationControl( {
 	return (
 		<ToggleGroupControl
 			isDeselectable
 			__next40pxDefaultSize
-			label={ __( 'Decoration' ) }
+			label={ __( 'DecorationDecorationDecorationDecoration' ) }
 			className={ clsx(
 				'block-editor-text-decoration-control',
 				className
 			) }
diff --git a/packages/block-editor/src/components/letter-spacing-control/index.js b/packages/block-editor/src/components/letter-spacing-control/index.js
index 1edbe65a373..45220b2b7fe 100644
--- a/packages/block-editor/src/components/letter-spacing-control/index.js
+++ b/packages/block-editor/src/components/letter-spacing-control/index.js
@@ -55,9 +55,9 @@ export default function LetterSpacingControl( {
 		<UnitControl
 			__next40pxDefaultSize={ __next40pxDefaultSize }
 			__shouldNotWarnDeprecated36pxSize
 			{ ...otherProps }
-			label={ __( 'Letter spacing' ) }
+			label={ __( 'Letter spacing Letter spacing Letter spacing' ) }
 			value={ value }
 			__unstableInputWidth={ __unstableInputWidth }
 			units={ units }
 			onChange={ onChange }

• Create a new post, add a pagragraph enable decoration and letter spacing in the typography options and verify there overflow is handled in the same way.

cc: @WordPress/gutenberg-components

[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: jorgefilipecosta <[email protected]>
Co-authored-by: grappler <[email protected]>

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