From b098f911d4ae3e83cbc80b0c669d58ffe851e55c Mon Sep 17 00:00:00 2001
From: Chris Holder <chris.holder@automattic.com>
Date: Fri, 31 Jan 2025 15:19:53 -0600
Subject: [PATCH] Clean up scrolling on disabled modal

---
 .../onboarding/subscribe-modal/index.tsx      | 136 +++++++++---------
 .../onboarding/subscribe-modal/style.scss     |  21 ++-
 2 files changed, 85 insertions(+), 72 deletions(-)

diff --git a/client/reader/onboarding/subscribe-modal/index.tsx b/client/reader/onboarding/subscribe-modal/index.tsx
index 9232513f4f19c..ce3a4dfc542c8 100644
--- a/client/reader/onboarding/subscribe-modal/index.tsx
+++ b/client/reader/onboarding/subscribe-modal/index.tsx
@@ -306,80 +306,82 @@ const SubscribeModal: React.FC< SubscribeModalProps > = ( { isOpen, onClose } )
 			<Modal
 				onRequestClose={ handleClose }
 				isFullScreen
-				className="subscribe-modal"
+				className={ clsx( 'subscribe-modal', {
+					'is-disabled': promptVerification,
+				} ) }
 				headerActions={ headerActions }
 				isDismissible={ false }
 			>
-				{ promptVerification && <SubscribeVerificationNudge /> }
-				<div
-					className={ clsx( 'subscribe-modal__content', {
-						'subscribe-modal__disabled-for-verification': promptVerification,
-					} ) }
-				>
-					<div className="subscribe-modal__site-list-column">
-						<h2 className="subscribe-modal__title">{ __( "Discover sites that you'll love" ) }</h2>
-						<p className="subscribe-modal__description">
-							{ __(
-								'Preview sites by clicking below, then subscribe to any site that inspires you.'
+				<div className="subscribe-modal__container">
+					{ promptVerification && <SubscribeVerificationNudge /> }
+					<div className="subscribe-modal__content">
+						<div className="subscribe-modal__site-list-column">
+							<h2 className="subscribe-modal__title">
+								{ __( "Discover sites that you'll love" ) }
+							</h2>
+							<p className="subscribe-modal__description">
+								{ __(
+									'Preview sites by clicking below, then subscribe to any site that inspires you.'
+								) }
+							</p>
+							{ isLoading && <LoadingPlaceholder /> }
+							{ ! isLoading && combinedRecommendations.length === 0 && (
+								<p>{ __( 'No recommendations available at the moment.' ) }</p>
 							) }
-						</p>
-						{ isLoading && <LoadingPlaceholder /> }
-						{ ! isLoading && combinedRecommendations.length === 0 && (
-							<p>{ __( 'No recommendations available at the moment.' ) }</p>
-						) }
-						{ ! isLoading && combinedRecommendations.length > 0 && (
-							<div className="subscribe-modal__recommended-sites">
-								{ displayedRecommendations.map( ( site: CardData ) => (
-									<ConnectedReaderSubscriptionListItem
-										key={ site.feed_ID }
-										feedId={ site.feed_ID }
-										siteId={ site.site_ID }
-										site={ site }
-										url={ site.site_URL }
-										showLastUpdatedDate={ false }
-										showNotificationSettings={ false }
-										showFollowedOnDate={ false }
-										followSource="reader-onboarding-modal"
-										disableSuggestedFollows
-										replaceStreamClickWithItemClick
-										onItemClick={ () => handleItemClick( site ) }
-										isSelected={ selectedSite?.feed_ID === site.feed_ID }
-										onFollowToggle={ ( following: boolean ) =>
-											handleFollowToggle( site, following )
-										}
-									/>
-								) ) }
-							</div>
-						) }
-						{ currentPage < maxPages && (
-							<Button
-								className="subscribe-modal__load-more-button"
-								onClick={ handleLoadMore }
-								variant="link"
-							>
-								{ __( 'Load more recommendations' ) }
-							</Button>
-						) }
-					</div>
-					<div className="subscribe-modal__preview-column">
-						<div className="subscribe-modal__preview-placeholder">
-							{ selectedSite && (
-								<>
-									<div className="subscribe-modal__preview-stream-header">
-										<h3>{ formatUrl( selectedSite.site_URL ) }</h3>
-									</div>
-									<div className="subscribe-modal__preview-stream-container">
-										<TypedStream
-											streamKey={ `feed:${ selectedSite.feed_ID }` }
-											className="is-site-stream subscribe-modal__preview-stream"
-											followSource="reader_subscribe_modal"
-											useCompactCards
-											trackScrollPage={ trackScrollPage.bind( null ) }
+							{ ! isLoading && combinedRecommendations.length > 0 && (
+								<div className="subscribe-modal__recommended-sites">
+									{ displayedRecommendations.map( ( site: CardData ) => (
+										<ConnectedReaderSubscriptionListItem
+											key={ site.feed_ID }
+											feedId={ site.feed_ID }
+											siteId={ site.site_ID }
+											site={ site }
+											url={ site.site_URL }
+											showLastUpdatedDate={ false }
+											showNotificationSettings={ false }
+											showFollowedOnDate={ false }
+											followSource="reader-onboarding-modal"
+											disableSuggestedFollows
+											replaceStreamClickWithItemClick
+											onItemClick={ () => handleItemClick( site ) }
+											isSelected={ selectedSite?.feed_ID === site.feed_ID }
+											onFollowToggle={ ( following: boolean ) =>
+												handleFollowToggle( site, following )
+											}
 										/>
-									</div>
-								</>
+									) ) }
+								</div>
+							) }
+							{ currentPage < maxPages && (
+								<Button
+									className="subscribe-modal__load-more-button"
+									onClick={ handleLoadMore }
+									variant="link"
+								>
+									{ __( 'Load more recommendations' ) }
+								</Button>
 							) }
 						</div>
+						<div className="subscribe-modal__preview-column">
+							<div className="subscribe-modal__preview-placeholder">
+								{ selectedSite && (
+									<>
+										<div className="subscribe-modal__preview-stream-header">
+											<h3>{ formatUrl( selectedSite.site_URL ) }</h3>
+										</div>
+										<div className="subscribe-modal__preview-stream-container">
+											<TypedStream
+												streamKey={ `feed:${ selectedSite.feed_ID }` }
+												className="is-site-stream subscribe-modal__preview-stream"
+												followSource="reader_subscribe_modal"
+												useCompactCards
+												trackScrollPage={ trackScrollPage.bind( null ) }
+											/>
+										</div>
+									</>
+								) }
+							</div>
+						</div>
 					</div>
 				</div>
 			</Modal>
diff --git a/client/reader/onboarding/subscribe-modal/style.scss b/client/reader/onboarding/subscribe-modal/style.scss
index 85f23ad168454..cc3a6305a2ae1 100644
--- a/client/reader/onboarding/subscribe-modal/style.scss
+++ b/client/reader/onboarding/subscribe-modal/style.scss
@@ -41,11 +41,6 @@ body.is-reader-page .subscribe-modal__preview-column .reader__card.card.is-place
 		}
 	}
 
-	&__disabled-for-verification {
-		opacity: 0.5;
-		pointer-events: none;
-	}
-
 	&__site-list-column {
 		flex: 1;
 		padding: 20px 20px 0;
@@ -154,4 +149,20 @@ body.is-reader-page .subscribe-modal__preview-column .reader__card.card.is-place
 			}
 		}
 	}
+
+	&.is-disabled {
+		.subscribe-modal__container {
+			height: calc( 100vh - 188px ); // Modal margin + modal padding + modal heading
+			overflow: hidden;
+			padding: 1px;
+		}
+		.subscribe-modal__content {
+			opacity: 0.5;
+			pointer-events: none;
+		}
+		.subscribe-modal__preview-stream-container,
+		.subscribe-modal__site-list-column {
+			overflow-y: hidden;
+		}
+	}
 }