FontSizePicker: implement display: contents for font-size-picker-se…

…lect
WordPress · Dec 25, 2024 · adbdbb5 · adbdbb5
1 parent e11978c
commit adbdbb5
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 13 deletions.
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
@@ -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
@@ -0,0 +1,3 @@
+.components-font-size-picker {
+	display: contents;
+}
diff --git 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";