From 0643023f73797dda7e43310de2e49a3d7b8a8f2e Mon Sep 17 00:00:00 2001
From: yogeshbhutkar <yogesh.bhutkar@rtcamp.com>
Date: Thu, 2 Jan 2025 09:55:33 +0530
Subject: [PATCH] Font Size Picker: Add truncation to header hint and adjust
 styles

---
 packages/components/src/font-size-picker/index.tsx | 3 ++-
 packages/components/src/font-size-picker/styles.ts | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx
index a47812640f1a29..698924290ff563 100644
--- a/packages/components/src/font-size-picker/index.tsx
+++ b/packages/components/src/font-size-picker/index.tsx
@@ -36,6 +36,7 @@ import FontSizePickerSelect from './font-size-picker-select';
 import FontSizePickerToggleGroup from './font-size-picker-toggle-group';
 import { T_SHIRT_NAMES } from './constants';
 import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
+import { Truncate } from '../truncate';
 
 const DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ];
 
@@ -141,7 +142,7 @@ const UnforwardedFontSizePicker = (
 						{ __( 'Size' ) }
 						{ headerHint && (
 							<HeaderHint className="components-font-size-picker__header__hint">
-								{ headerHint }
+								<Truncate>{ headerHint }</Truncate>
 							</HeaderHint>
 						) }
 					</HeaderLabel>
diff --git a/packages/components/src/font-size-picker/styles.ts b/packages/components/src/font-size-picker/styles.ts
index b0e33b5aea3a2e..2596115052b772 100644
--- a/packages/components/src/font-size-picker/styles.ts
+++ b/packages/components/src/font-size-picker/styles.ts
@@ -36,4 +36,5 @@ export const HeaderLabel = styled( BaseControl.VisualLabel )`
 
 export const HeaderHint = styled.span`
 	color: ${ COLORS.gray[ 700 ] };
+	display: contents;
 `;