From 9270350f68db49ef72b8062b2009b8203bd2f30b Mon Sep 17 00:00:00 2001
From: Antonio Sejas <antonio@sejas.es>
Date: Wed, 26 Nov 2025 23:38:35 +0000
Subject: [PATCH 1/2] Add Search input to create pull remote site flow with
 controlled scroll

---
 .../add-site/components/pull-remote-site.tsx  | 32 +++++++++++++------
 src/modules/add-site/index.tsx                |  2 +-
 .../components/sync-sites-modal-selector.tsx  |  2 +-
 3 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/modules/add-site/components/pull-remote-site.tsx b/src/modules/add-site/components/pull-remote-site.tsx
index a812a0cf5b..acd367a687 100644
--- a/src/modules/add-site/components/pull-remote-site.tsx
+++ b/src/modules/add-site/components/pull-remote-site.tsx
@@ -5,7 +5,7 @@ import {
 } from '@wordpress/components';
 import { check, Icon } from '@wordpress/icons';
 import { useI18n } from '@wordpress/react-i18n';
-import { PropsWithChildren, useEffect } from 'react';
+import { PropsWithChildren, useEffect, useState } from 'react';
 import { ArrowIcon } from 'src/components/arrow-icon';
 import Button from 'src/components/button';
 import offlineIcon from 'src/components/offline-icon';
@@ -14,7 +14,7 @@ import { useSyncSites } from 'src/hooks/sync-sites';
 import { useAuth } from 'src/hooks/use-auth';
 import { useOffline } from 'src/hooks/use-offline';
 import { getIpcApi } from 'src/lib/get-ipc-api';
-import { ListSites } from 'src/modules/sync/components/sync-sites-modal-selector';
+import { ListSites, SearchSites } from 'src/modules/sync/components/sync-sites-modal-selector';
 import { SyncTabImage } from 'src/modules/sync/components/sync-tab-image';
 import type { SyncSite } from 'src/hooks/use-fetch-wpcom-sites/types';
 
@@ -121,6 +121,15 @@ export function PullRemoteSite( {
 	const { isAuthenticated } = useAuth();
 	const { location } = useNavigator();
 	const { syncSites, refetchSites } = useSyncSites();
+	const [ searchQuery, setSearchQuery ] = useState< string >( '' );
+
+	const filteredSites = syncSites.filter( ( site ) => {
+		const searchQueryLower = searchQuery.toLowerCase();
+		return (
+			site.name?.toLowerCase().includes( searchQueryLower ) ||
+			site.url?.toLowerCase().includes( searchQueryLower )
+		);
+	} );
 
 	useEffect( () => {
 		if ( location.path === '/pullRemote' && isAuthenticated ) {
@@ -138,15 +147,20 @@ export function PullRemoteSite( {
 	};
 
 	return (
-		<VStack className="text-center w-full" alignment="top" spacing="3">
-			<Heading className="text-[32px] text-gray-900" weight={ 500 }>
+		<VStack className="" alignment="top" spacing="3">
+			<Heading className="text-center text-[32px] text-gray-900" weight={ 500 }>
 				{ __( 'Pull your remote site' ) }
 			</Heading>
-			<ListSites
-				syncSites={ syncSites }
-				selectedSiteId={ selectedRemoteSite?.id || null }
-				onSelectSite={ handleSiteSelect }
-			/>
+			<VStack className="flex flex-col w-full max-w-[650px] h-full">
+				<SearchSites searchQuery={ searchQuery } setSearchQuery={ setSearchQuery } />
+				<div className="flex-1 min-h-0 h-full overflow-y-auto">
+					<ListSites
+						syncSites={ filteredSites }
+						selectedSiteId={ selectedRemoteSite?.id || null }
+						onSelectSite={ handleSiteSelect }
+					/>
+				</div>
+			</VStack>
 		</VStack>
 	);
 }
diff --git a/src/modules/add-site/index.tsx b/src/modules/add-site/index.tsx
index 22035c08bf..37375bc606 100644
--- a/src/modules/add-site/index.tsx
+++ b/src/modules/add-site/index.tsx
@@ -249,7 +249,7 @@ function NavigationContent( props: NavigationContentProps ) {
 			<Navigator.Screen className="flex-1" path="/backup/create">
 				<CreateSite { ...createSiteProps } />
 			</Navigator.Screen>
-			<Navigator.Screen className="flex-1" path="/pullRemote">
+			<Navigator.Screen className="flex-1 flex justify-center" path="/pullRemote">
 				<PullRemoteSite
 					selectedRemoteSite={ selectedRemoteSite }
 					setSelectedRemoteSite={ ( remoteSite?: SyncSite ) => {
diff --git a/src/modules/sync/components/sync-sites-modal-selector.tsx b/src/modules/sync/components/sync-sites-modal-selector.tsx
index 911a125f87..8d658d293f 100644
--- a/src/modules/sync/components/sync-sites-modal-selector.tsx
+++ b/src/modules/sync/components/sync-sites-modal-selector.tsx
@@ -126,7 +126,7 @@ export function SyncSitesModalSelector( {
 	);
 }
 
-function SearchSites( {
+export function SearchSites( {
 	searchQuery,
 	setSearchQuery,
 }: {

From 765ef773697e8c26b96d1d4e59f511c79c68e573 Mon Sep 17 00:00:00 2001
From: Antonio Sejas <antonio@sejas.es>
Date: Thu, 27 Nov 2025 10:17:14 +0000
Subject: [PATCH 2/2] Improve scroll and min width and height

---
 src/modules/add-site/components/pull-remote-site.tsx      | 6 +++---
 src/modules/sync/components/sync-sites-modal-selector.tsx | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/modules/add-site/components/pull-remote-site.tsx b/src/modules/add-site/components/pull-remote-site.tsx
index acd367a687..708f1a658e 100644
--- a/src/modules/add-site/components/pull-remote-site.tsx
+++ b/src/modules/add-site/components/pull-remote-site.tsx
@@ -147,13 +147,13 @@ export function PullRemoteSite( {
 	};
 
 	return (
-		<VStack className="" alignment="top" spacing="3">
+		<VStack className="w-full" alignment="top" spacing="3">
 			<Heading className="text-center text-[32px] text-gray-900" weight={ 500 }>
 				{ __( 'Pull your remote site' ) }
 			</Heading>
-			<VStack className="flex flex-col w-full max-w-[650px] h-full">
+			<VStack className="flex flex-col w-full max-w-[650px] flex-1">
 				<SearchSites searchQuery={ searchQuery } setSearchQuery={ setSearchQuery } />
-				<div className="flex-1 min-h-0 h-full overflow-y-auto">
+				<div className="h-full">
 					<ListSites
 						syncSites={ filteredSites }
 						selectedSiteId={ selectedRemoteSite?.id || null }
diff --git a/src/modules/sync/components/sync-sites-modal-selector.tsx b/src/modules/sync/components/sync-sites-modal-selector.tsx
index 8d658d293f..5495feb9a9 100644
--- a/src/modules/sync/components/sync-sites-modal-selector.tsx
+++ b/src/modules/sync/components/sync-sites-modal-selector.tsx
@@ -136,9 +136,9 @@ export function SearchSites( {
 	const { __ } = useI18n();
 	const locale = useI18nLocale();
 	return (
-		<div className="flex flex-col px-8 pb-6 border-b border-a8c-gray-5">
+		<div className="flex flex-col px-8 pb-6 border-b border-a8c-gray-5 shrink-0">
 			<SearchControl
-				className="w-full mt-0.5 mb-2"
+				className="w-full mt-0.5 mb-2 text-black"
 				placeholder={ __( 'Search sites' ) }
 				onChange={ ( value ) => {
 					setSearchQuery( value );