From e11978c4bc3be59da5298e7c39ee11675ad76199 Mon Sep 17 00:00:00 2001
From: yogeshbhutkar <yogesh.bhutkar@rtcamp.com>
Date: Wed, 25 Dec 2024 11:25:58 +0530
Subject: [PATCH] FontSizePicker: truncate option name based on viewport size

---
 .../font-size-picker/font-size-picker-select.tsx   | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/font-size-picker/font-size-picker-select.tsx b/packages/components/src/font-size-picker/font-size-picker-select.tsx
index b33c382f3393e4..0a0b7d912b1f66 100644
--- a/packages/components/src/font-size-picker/font-size-picker-select.tsx
+++ b/packages/components/src/font-size-picker/font-size-picker-select.tsx
@@ -13,6 +13,7 @@ import type {
 	FontSizePickerSelectOption,
 } from './types';
 import { getCommonSizeUnit, isSimpleCssValue } from './utils';
+import { useViewportMatch } from '@wordpress/compose';
 
 const DEFAULT_OPTION: FontSizePickerSelectOption = {
 	key: 'default',
@@ -66,6 +67,11 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 		? options.find( ( option ) => option.value === value ) ?? CUSTOM_OPTION
 		: DEFAULT_OPTION;
 
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+	const truncate = ( str: string, maxLength: number ) => {
+		return str.length > maxLength ? str.slice( 0, maxLength ) + '…' : str;
+	};
+
 	return (
 		<CustomSelectControl
 			__next40pxDefaultSize={ __next40pxDefaultSize }
@@ -79,7 +85,13 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 				selectedOption.name
 			) }
 			options={ options }
-			value={ selectedOption }
+			value={ {
+				...selectedOption,
+				name: truncate(
+					selectedOption.name,
+					isMobileViewport ? 45 : 30
+				),
+			} }
 			showSelectedHint
 			onChange={ ( {
 				selectedItem,