Style the Filter by Price block based on the wrapper width

assets/js/base/components/price-slider/index.tsx

@@ -8,6 +8,7 @@ import {
 	useCallback,
 	useMemo,
 	useRef,
+	useLayoutEffect,
 } from '@wordpress/element';
 import classnames from 'classnames';
 import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount';
@@ -97,6 +98,9 @@ const PriceSlider = ( {
 	const [ minPriceInput, setMinPriceInput ] = useState( minPrice );
 	const [ maxPriceInput, setMaxPriceInput ] = useState( maxPrice );
 
+	const wrapper = useRef< HTMLInputElement >( null );
+	const [ wrapperWidth, setWrapperWidth ] = useState( 0 );
+
 	useEffect( () => {
 		setMinPriceInput( minPrice );
 	}, [ minPrice ] );
@@ -105,6 +109,12 @@ const PriceSlider = ( {
 		setMaxPriceInput( maxPrice );
 	}, [ maxPrice ] );
 
+	useLayoutEffect( () => {
+		if ( inlineInput && wrapper.current ) {
+			setWrapperWidth( wrapper.current?.offsetWidth );
+		}
+	}, [ inlineInput, setWrapperWidth ] );
+
 	/**
 	 * Checks if the min and max constraints are valid.
 	 */
@@ -292,7 +302,9 @@ const PriceSlider = ( {
 		showFilterButton &&
 			'wc-block-components-price-slider--has-filter-button',
 		isLoading && 'is-loading',
-		! hasValidConstraints && 'is-disabled'
+		! hasValidConstraints && 'is-disabled',
+		( inlineInput || wrapperWidth <= 300 ) &&
+			'wc-block-components-price-slider--is-input-inline'
 	);
 
 	const activeElement = isObject( minRange.current )
@@ -310,6 +322,8 @@ const PriceSlider = ( {
 		maxPriceInput / 10 ** currency.minorUnit
 	);
 
+	const inlineInputAvailable = inlineInput && wrapperWidth > 300;
+
 	const slider = (
 		<div
 			className="wc-block-price-filter__range-input-wrapper wc-block-components-price-slider__range-input-wrapper"
@@ -370,8 +384,8 @@ const PriceSlider = ( {
 	);
 
 	return (
-		<div className={ classes }>
-			{ ( ! inlineInput || ! showInputFields ) && slider }
+		<div className={ classes } ref={ wrapper }>
+			{ ( ! inlineInputAvailable || ! showInputFields ) && slider }
 			{ showInputFields && (
 				<div className="wc-block-price-filter__controls wc-block-components-price-slider__controls">
 					<FormattedMonetaryAmount
@@ -398,7 +412,7 @@ const PriceSlider = ( {
 						disabled={ isLoading || ! hasValidConstraints }
 						value={ minPriceInput }
 					/>
-					{ inlineInput && slider }
+					{ inlineInputAvailable && slider }
 					<FormattedMonetaryAmount
 						currency={ currency }
 						displayType="input"

assets/js/base/components/price-slider/style.scss

@@ -112,6 +112,10 @@
 		max-width: 80px;
 		min-width: 0;
 		padding: $gap-smaller;
+
+		.wc-block-components-price-slider--is-input-inline & {
+			max-width: 60px;
+		}
 	}
 }
 

tests/e2e/specs/shopper/filter-products-by-price.test.ts

@@ -39,7 +39,7 @@ const block = {
 			submitButton: '.wc-block-components-filter-submit-button',
 		},
 	},
-	urlSearchParamWhenFilterIsApplied: '?max_price=1.99',
+	urlSearchParamWhenFilterIsApplied: '?max_price=2',
 	foundProduct: '32GB USB Stick',
 };
 
@@ -56,7 +56,7 @@ const setMaxPrice = async () => {
 	await page.keyboard.down( 'Shift' );
 	await page.keyboard.press( 'Home' );
 	await page.keyboard.up( 'Shift' );
-	await page.keyboard.type( '1.99' );
+	await page.keyboard.type( '2' );
 	await page.keyboard.press( 'Tab' );
 };