Commit 9b8cbddc8ea for woocommerce

commit 9b8cbddc8ead8da37d5247ef0d3b269425a364b4
Author: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Date:   Wed Sep 23 13:30:45 2026 +0300

    Admin: Migrate away from `ResponsiveWrapper` component (#68975)

    * Admin: Migrate away from ResponsiveWrapper component

    * Close modal before the requests finish

diff --git a/plugins/woocommerce/changelog/68958-migrate-away-from-responsive-wrapper b/plugins/woocommerce/changelog/68958-migrate-away-from-responsive-wrapper
new file mode 100644
index 00000000000..71a48fa5287
--- /dev/null
+++ b/plugins/woocommerce/changelog/68958-migrate-away-from-responsive-wrapper
@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Replace the deprecated ResponsiveWrapper component in the product usage notice modal with CSS aspect-ratio.
diff --git a/plugins/woocommerce/client/admin/client/wp-admin-scripts/woo-product-usage-notice/modal.js b/plugins/woocommerce/client/admin/client/wp-admin-scripts/woo-product-usage-notice/modal.js
index 575d1de0318..136c0fa4d70 100644
--- a/plugins/woocommerce/client/admin/client/wp-admin-scripts/woo-product-usage-notice/modal.js
+++ b/plugins/woocommerce/client/admin/client/wp-admin-scripts/woo-product-usage-notice/modal.js
@@ -14,7 +14,6 @@ import {
 	FlexItem,
 	Icon,
 	Modal,
-	ResponsiveWrapper,
 } from '@wordpress/components';
 import { commentContent, people, reusableBlock } from '@wordpress/icons';
 import { Text } from '@woocommerce/experimental';
@@ -53,6 +52,7 @@ export default function ProductUsageNoticeModal( {
 	const isExpired = subscriptionState.expired;

 	const dismiss = () => {
+		setIsModalOpen( false );
 		dismissRequest(
 			{
 				dismissAction,
@@ -60,7 +60,6 @@ export default function ProductUsageNoticeModal( {
 				dismissNonce,
 			},
 			() => {
-				setIsModalOpen( false );
 				recordEvent( 'product_usage_notice_dismissed', {
 					product_id: productId,
 					screen_id: screenId,
@@ -69,6 +68,7 @@ export default function ProductUsageNoticeModal( {
 		);
 	};
 	const remindLater = () => {
+		setIsModalOpen( false );
 		remindLaterRequest(
 			{
 				remindLaterAction,
@@ -76,7 +76,6 @@ export default function ProductUsageNoticeModal( {
 				remindLaterNonce,
 			},
 			() => {
-				setIsModalOpen( false );
 				recordEvent( 'product_usage_notice_maybe_later_clicked', {
 					product_id: productId,
 					screen_id: screenId,
@@ -224,12 +223,11 @@ export default function ProductUsageNoticeModal( {
 		return (
 			<Card className="secondary">
 				<CardMedia>
-					<ResponsiveWrapper
-						naturalWidth={ 240 }
-						naturalHeight={ 240 }
-					>
-						<img src={ extensionsSvg } alt="" />
-					</ResponsiveWrapper>
+					<div className="woocommerce-product-usage-notice__illustration">
+						<div>
+							<img src={ extensionsSvg } alt="" />
+						</div>
+					</div>
 				</CardMedia>
 			</Card>
 		);
diff --git a/plugins/woocommerce/client/admin/client/wp-admin-scripts/woo-product-usage-notice/style.scss b/plugins/woocommerce/client/admin/client/wp-admin-scripts/woo-product-usage-notice/style.scss
index 660380f52e6..8bb352459b9 100644
--- a/plugins/woocommerce/client/admin/client/wp-admin-scripts/woo-product-usage-notice/style.scss
+++ b/plugins/woocommerce/client/admin/client/wp-admin-scripts/woo-product-usage-notice/style.scss
@@ -94,6 +94,21 @@ $font-sf-pro-text: helveticaneue-light, "Helvetica Neue Light",
 			justify-content: center;
 		}
 	}
+
+	&__illustration {
+		position: relative;
+		max-width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		img {
+			display: block;
+			max-width: 100%;
+			width: 100%;
+			aspect-ratio: 1 / 1;
+		}
+	}
 }

 .woocommerce-subscription-benefits {