From adbdbb5fce50bcd3d551bfb34129029f26344cdd Mon Sep 17 00:00:00 2001
From: yogeshbhutkar <yogesh.bhutkar@rtcamp.com>
Date: Wed, 25 Dec 2024 11:59:15 +0530
Subject: [PATCH] FontSizePicker: implement `display: contents` for
 font-size-picker-select

---
 .../font-size-picker/font-size-picker-select.tsx   | 14 +-------------
 .../components/src/font-size-picker/style.scss     |  3 +++
 packages/components/src/style.scss                 |  1 +
 3 files changed, 5 insertions(+), 13 deletions(-)
 create mode 100644 packages/components/src/font-size-picker/style.scss

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 0a0b7d912b1f66..b33c382f3393e4 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,7 +13,6 @@ import type {
 	FontSizePickerSelectOption,
 } from './types';
 import { getCommonSizeUnit, isSimpleCssValue } from './utils';
-import { useViewportMatch } from '@wordpress/compose';
 
 const DEFAULT_OPTION: FontSizePickerSelectOption = {
 	key: 'default',
@@ -67,11 +66,6 @@ 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 }
@@ -85,13 +79,7 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 				selectedOption.name
 			) }
 			options={ options }
-			value={ {
-				...selectedOption,
-				name: truncate(
-					selectedOption.name,
-					isMobileViewport ? 45 : 30
-				),
-			} }
+			value={ selectedOption }
 			showSelectedHint
 			onChange={ ( {
 				selectedItem,
diff --git a/packages/components/src/font-size-picker/style.scss b/packages/components/src/font-size-picker/style.scss
new file mode 100644
index 00000000000000..ad3533dd73dc13
--- /dev/null
+++ b/packages/components/src/font-size-picker/style.scss
@@ -0,0 +1,3 @@
+.components-font-size-picker {
+	display: contents;
+}
diff --git a/packages/components/src/style.scss b/packages/components/src/style.scss
index 368dec0f5e253d..be4e870156c021 100644
--- a/packages/components/src/style.scss
+++ b/packages/components/src/style.scss
@@ -28,6 +28,7 @@
 @import "./duotone-picker/style.scss";
 @import "./duotone-picker/color-list-picker/style.scss";
 @import "./external-link/style.scss";
+@import "./font-size-picker/style.scss";
 @import "./form-toggle/style.scss";
 @import "./form-token-field/style.scss";
 @import "./guide/style.scss";