Commit b496e8cc332 for woocommerce
commit b496e8cc332a88996776ccb3280793425227be56
Author: Luigi Teschio <gigitux@gmail.com>
Date: Thu May 21 09:22:55 2026 +0200
Fix products dashboard mobile layout (#65218)
* Fix products dashboard mobile layout
* Add changelog for products dashboard mobile layout
diff --git a/packages/js/experimental-products-app/changelog/fix-products-dashboard-mobile-layout b/packages/js/experimental-products-app/changelog/fix-products-dashboard-mobile-layout
new file mode 100644
index 00000000000..fcb74f41016
--- /dev/null
+++ b/packages/js/experimental-products-app/changelog/fix-products-dashboard-mobile-layout
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Render the products dashboard content on mobile-width viewports.
diff --git a/packages/js/experimental-products-app/src/layout.tsx b/packages/js/experimental-products-app/src/layout.tsx
index 150a187cb63..202b38955ea 100644
--- a/packages/js/experimental-products-app/src/layout.tsx
+++ b/packages/js/experimental-products-app/src/layout.tsx
@@ -36,6 +36,7 @@ export function Layout( { route, showNewNavigation = false }: LayoutProps ) {
const disableMotion = useReducedMotion();
const { key: routeKey, areas, widths } = route;
+ const mobileArea = areas.mobile === true ? areas.content : areas.mobile;
return (
<>
@@ -90,6 +91,12 @@ export function Layout( { route, showNewNavigation = false }: LayoutProps ) {
</div>
) }
+ { isMobileViewport && mobileArea && (
+ <div className="edit-site-layout__area">
+ { mobileArea }
+ </div>
+ ) }
+
{ ! isMobileViewport && areas.edit }
</div>
</div>