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

yogeshbhutkar · Jan 2, 2025 · 0643023 · 0643023
1 parent 6eb365e
commit 0643023
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 1 deletion.
diff --git 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
@@ -36,4 +36,5 @@ export const HeaderLabel = styled( BaseControl.VisualLabel )`
 
 export const HeaderHint = styled.span`
 	color: ${ COLORS.gray[ 700 ] };
+	display: contents;
 `;