From 926920aa76dce6583b984825582eec5b5769fddb Mon Sep 17 00:00:00 2001
From: Volodymyr Makukha <nei.css@gmail.com>
Date: Wed, 24 Dec 2025 22:29:59 +0000
Subject: [PATCH 1/2] Fix preview site component

---
 src/components/content-tab-overview.tsx | 28 ++++++++++++++-----------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/components/content-tab-overview.tsx b/src/components/content-tab-overview.tsx
index 91ab839714..d47aa219b9 100644
--- a/src/components/content-tab-overview.tsx
+++ b/src/components/content-tab-overview.tsx
@@ -182,7 +182,7 @@ function ShortcutsSection( { selectedSite }: Pick< ContentTabOverviewProps, 'sel
 }
 
 export function ContentTabOverview( { selectedSite }: ContentTabOverviewProps ) {
-	const [ isThumbnailError, setIsThumbnailError ] = useState( false );
+	let [ isThumbnailError, setIsThumbnailError ] = useState( false );
 	const { __ } = useI18n();
 	const { startServer, loadingServer } = useSiteDetails();
 	const {
@@ -209,7 +209,7 @@ export function ContentTabOverview( { selectedSite }: ContentTabOverviewProps )
 		<img
 			onError={ () => setIsThumbnailError( true ) }
 			onLoad={ () => setIsThumbnailError( false ) }
-			className={ ! isThumbnailError ? 'w-full h-full' : 'absolute invisible' }
+			className="w-full h-full"
 			src={ thumbnailData || '' }
 			alt={ themeDetails?.name }
 		/>
@@ -227,30 +227,34 @@ export function ContentTabOverview( { selectedSite }: ContentTabOverviewProps )
 						! loading && 'hover:border-a8c-blue-50 duration-300'
 					) }
 				>
-					{ isThumbnailError && ! loading && (
-						<div className="flex items-center justify-center w-full h-64 leading-5 text-a8c-gray-50">
-							{ __( 'Preview unavailable' ) }
-						</div>
-					) }
 					{ ! loading && (
 						<button
 							aria-label={ __( 'Open site' ) }
 							className={ cx(
-								'relative group focus-visible:outline-a8c-blue-50',
+								'w-full relative group focus-visible:outline-a8c-blue-50',
 								isServerLoading && 'cursor-not-allowed'
 							) }
 							onClick={ handleThumbnailClick }
 							disabled={ isServerLoading }
 						>
 							<div
-								className={
-									'opacity-0 group-hover:opacity-90 group-hover:bg-white group-focus:opacity-90 group-focus:bg-white duration-300 absolute size-full flex justify-center items-center bg-white text-a8c-blue-50'
-								}
+								className={ cx(
+									'opacity-0 group-hover:bg-white group-focus:bg-white duration-300 absolute size-full flex justify-center items-center bg-white text-a8c-blue-50',
+									isThumbnailError
+										? 'group-hover:opacity-100 group-focus:opacity-100'
+										: 'group-hover:opacity-90 group-focus:opacity-90'
+								) }
 							>
 								{ __( 'Open site' ) }
 								<ArrowIcon />
 							</div>
-							{ thumbnailImage }
+							{ isThumbnailError ? (
+								<div className="flex w-full items-center justify-center h-64 leading-5 text-a8c-gray-50 text-center">
+									{ __( 'Preview unavailable' ) }
+								</div>
+							) : (
+								thumbnailImage
+							) }
 						</button>
 					) }
 				</div>

From b93f42a9a12856519fd5e2d1c2031ecf037ab7b8 Mon Sep 17 00:00:00 2001
From: Volodymyr Makukha <nei.css@gmail.com>
Date: Wed, 24 Dec 2025 22:49:25 +0000
Subject: [PATCH 2/2] revert

---
 src/components/content-tab-overview.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/content-tab-overview.tsx b/src/components/content-tab-overview.tsx
index d47aa219b9..faa5d5a526 100644
--- a/src/components/content-tab-overview.tsx
+++ b/src/components/content-tab-overview.tsx
@@ -182,7 +182,7 @@ function ShortcutsSection( { selectedSite }: Pick< ContentTabOverviewProps, 'sel
 }
 
 export function ContentTabOverview( { selectedSite }: ContentTabOverviewProps ) {
-	let [ isThumbnailError, setIsThumbnailError ] = useState( false );
+	const [ isThumbnailError, setIsThumbnailError ] = useState( false );
 	const { __ } = useI18n();
 	const { startServer, loadingServer } = useSiteDetails();
 	const {