Make blueprints previews adjustable to window height

src/modules/add-site/components/blueprints.tsx

@@ -17,6 +17,7 @@ import StudioButton from 'src/components/button';
 import { cx } from 'src/lib/cx';
 import { getIpcApi } from 'src/lib/get-ipc-api';
 import { useGetBlueprints } from 'src/stores/wpcom-api';
+import { useOverflowItems } from '../hooks/use-overflow-items';
 
 interface Blueprint {
 	slug: string;
@@ -47,7 +48,48 @@ interface AddSiteBlueprintProps {
 	onFileBlueprintSelect?: ( blueprint: Blueprint ) => void;
 }
 
-const MAX_BLUEPRINTS_CATEGORIES = 3;
+function CategoryBadges( { categories }: { categories: string[] } ) {
+	const { __ } = useI18n();
+	const containerRef = useRef< HTMLDivElement >( null );
+	const { visible, hidden, hiddenCount, itemRefs } = useOverflowItems( categories, containerRef );
+
+	return (
+		<HStack ref={ containerRef } spacing={ 3 } alignment="left" className="w-full">
+			{ categories.map( ( category, index ) => (
+				<Text
+					as="span"
+					key={ category }
+					ref={ ( el ) => {
+						itemRefs.current[ index ] = el;
+					} }
+					className="px-2.5 py-1 text-xs bg-gray-100 text-gray-700 rounded-sm flex items-center flex-shrink-0 max-w-32 truncate"
+					style={ {
+						visibility: index < visible.length ? 'visible' : 'hidden',
+						position: index >= visible.length ? 'absolute' : 'static',
+					} }
+				>
+					{ category }
+				</Text>
+			) ) }
+			{ hiddenCount > 0 && (
+				<Tooltip
+					text={ hidden.join( ', ' ) }
+					delay={ 200 }
+					placement="top-end"
+					className="max-w-xs"
+				>
+					<Text
+						as="span"
+						className="px-2.5 py-1 text-xs bg-gray-100 text-gray-700 rounded-sm flex items-center font-medium whitespace-nowrap flex-shrink-0"
+					>
+						{ /* translators: %d: Number of hidden categories */ }
+						{ sprintf( __( '+%d more' ), hiddenCount ) }
+					</Text>
+				</Tooltip>
+			) }
+		</HStack>
+	);
+}
 
 export function AddSiteBlueprintSelector( {
 	blueprints,
@@ -108,6 +150,7 @@ export function AddSiteBlueprintSelector( {
 						alt={ item.title }
 						className={ cx(
 							'w-full h-32 object-cover object-top cursor-pointer transition-all duration-150 rounded-lg group',
+							'[@media(min-height:680px)]:h-48',
 							'hover:shadow-md hover:outline hover:outline-2 hover:outline-blue-500',
 							'transition-transform duration-150',
 							'hover:scale-105',
@@ -154,37 +197,7 @@ export function AddSiteBlueprintSelector( {
 					const categories = ( item.blueprint.meta?.categories || [] ).filter(
 						( category ) => category !== 'Studio'
 					);
-					const visibleCategories = categories.slice( 0, MAX_BLUEPRINTS_CATEGORIES );
-					const remainingCount = categories.length - MAX_BLUEPRINTS_CATEGORIES;
-
-					return (
-						<HStack spacing={ 3 } wrap alignment="left">
-							{ visibleCategories.map( ( category ) => (
-								<Text
-									as="span"
-									key={ category }
-									className="px-2.5 py-1 text-xs bg-gray-100 text-gray-700 rounded-sm flex items-center"
-								>
-									{ category }
-								</Text>
-							) ) }
-							{ remainingCount > 0 && (
-								<Tooltip
-									text={ categories.slice( MAX_BLUEPRINTS_CATEGORIES ).join( ', ' ) }
-									delay={ 200 }
-									position="top right"
-									className="max-w-xs"
-								>
-									<Text
-										as="span"
-										className="px-2.5 py-1 text-xs bg-gray-100 text-gray-700 rounded-sm flex items-center font-medium"
-									>
-										+{ remainingCount } more
-									</Text>
-								</Tooltip>
-							) }
-						</HStack>
-					);
+					return <CategoryBadges categories={ categories } />;
 				},
 			},
 			{
@@ -357,7 +370,7 @@ export function AddSiteBlueprintSelector( {
 				) }
 			</HStack>
 
-			<div className="w-full px-3 [&_.dataviews-view-grid]:!grid [&_.dataviews-view-grid]:!grid-cols-3 [&_.dataviews-view-grid]:!gap-4 [&_.dataviews-view-grid]:!items-start [&_.components-badge]:!bg-transparent [&_.components-badge]:!p-0">
+			<div className="w-full px-3 [&_.dataviews-view-grid]:!grid [&_.dataviews-view-grid]:!grid-cols-3 [&_.dataviews-view-grid]:!gap-4 [&_.dataviews-view-grid]:!items-start [&_.components-badge]:!bg-transparent [&_.components-badge]:!p-0 [&_.components-badge]:!w-full [&_.components-badge_.components-badge__content]:!w-full [&_.components-badge>*]:!w-full">
 				{ isFetchingBlueprints && (
 					<Text className="text-[14px] block text-center py-[100px]">
 						{ __( 'Loading blueprints...' ) }

src/modules/add-site/hooks/use-overflow-items.ts

@@ -0,0 +1,77 @@
+import { useLayoutEffect, useState, useRef, useCallback } from 'react';
+
+// Constants for layout calculations
+const ITEM_SPACING = 12; // Gap between category items in pixels
+const MORE_BUTTON_WIDTH = 70; // Estimated width of "+X more" button in pixels
+const DEBOUNCE_DELAY = 50; // Delay in milliseconds for debounced recalculation
+const TOLERANCE = 10; // Extra pixels to account for measurement precision
+
+export function useOverflowItems( items: string[], containerRef: React.RefObject< HTMLElement > ) {
+	const [ visibleCount, setVisibleCount ] = useState( items.length );
+	const itemRefs = useRef< ( HTMLElement | null )[] >( [] );
+	const lastWidth = useRef( 0 );
+	const debounceTimeout = useRef< NodeJS.Timeout | null >( null );
+
+	const calculate = useCallback( () => {
+		if ( ! containerRef.current || items.length === 0 ) {
+			return;
+		}
+
+		const container = containerRef.current;
+		const containerWidth = container.offsetWidth;
+
+		if ( containerWidth === 0 || containerWidth === lastWidth.current ) {
+			return;
+		}
+
+		lastWidth.current = containerWidth;
+
+		let totalWidth = 0;
+		let count = 0;
+
+		for ( let i = 0; i < itemRefs.current.length; i++ ) {
+			const item = itemRefs.current[ i ];
+			if ( ! item ) continue;
+
+			const itemWidth = item.offsetWidth;
+			const spacing = i > 0 ? ITEM_SPACING : 0;
+			const moreButtonSpace = i < items.length - 1 ? MORE_BUTTON_WIDTH : 0;
+
+			if ( totalWidth + spacing + itemWidth + moreButtonSpace <= containerWidth ) {
+				totalWidth += spacing + itemWidth;
+				count = i + 1;
+			} else {
+				break;
+			}
+		}
+
+		if ( count === items.length - 1 && itemRefs.current[ items.length - 1 ] ) {
+			const lastItem = itemRefs.current[ items.length - 1 ];
+			const lastItemWidth = lastItem?.offsetWidth || 0;
+			if ( totalWidth + ITEM_SPACING + lastItemWidth <= containerWidth + TOLERANCE ) {
+				count = items.length;
+			}
+		}
+
+		setVisibleCount( Math.max( 1, count ) );
+	}, [ items, containerRef ] );
+
+	useLayoutEffect( () => {
+		if ( debounceTimeout.current ) {
+			clearTimeout( debounceTimeout.current );
+		}
+		debounceTimeout.current = setTimeout( calculate, DEBOUNCE_DELAY );
+		return () => {
+			if ( debounceTimeout.current ) {
+				clearTimeout( debounceTimeout.current );
+			}
+		};
+	}, [ calculate ] );
+
+	return {
+		visible: items.slice( 0, visibleCount ),
+		hidden: items.slice( visibleCount ),
+		hiddenCount: items.length - visibleCount,
+		itemRefs,
+	};
+}