From 314035a65ed46ad10a779ee49612b2462894d4be Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Sun, 16 Jun 2024 09:27:40 -0700
Subject: [PATCH 1/2] Hide overflow of BlockTools wrapper

---
 .../src/components/block-canvas/index.js            |  7 ++++++-
 .../block-editor/src/components/iframe/content.scss |  8 ++++++--
 .../block-editor/src/components/iframe/index.js     | 13 ++++++++-----
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/packages/block-editor/src/components/block-canvas/index.js b/packages/block-editor/src/components/block-canvas/index.js
index c6a47b7b5533cc..26861e8f1c0438 100644
--- a/packages/block-editor/src/components/block-canvas/index.js
+++ b/packages/block-editor/src/components/block-canvas/index.js
@@ -58,7 +58,12 @@ export function ExperimentalBlockCanvas( {
 	return (
 		<BlockTools
 			__unstableContentRef={ localRef }
-			style={ { height, display: 'flex' } }
+			style={ {
+				height,
+				display: 'flex',
+				overflow: 'hidden',
+				position: 'relative',
+			} }
 		>
 			<Iframe
 				{ ...iframeProps }
diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
index 165cf70d24a710..009766ff34875a 100644
--- a/packages/block-editor/src/components/iframe/content.scss
+++ b/packages/block-editor/src/components/iframe/content.scss
@@ -5,7 +5,11 @@
 .block-editor-iframe__container {
 	width: 100%;
 	height: 100%;
-	overflow-x: hidden;
+	overflow: auto;
+
+	&.is-zoomed-out {
+		overflow-x: hidden;
+	}
 }
 
 .block-editor-iframe__scale-container {
@@ -13,7 +17,7 @@
 	height: 100%;
 }
 
-.block-editor-iframe__scale-container.is-zoomed-out {
+.is-zoomed-out.block-editor-iframe__container .block-editor-iframe__scale-container {
 	$container-width: var(--wp-block-editor-iframe-zoom-out-container-width, 100vw);
 	$prev-container-width: var(--wp-block-editor-iframe-zoom-out-prev-container-width, 100vw);
 	width: $prev-container-width;
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 669e2fe25a9fbb..a40fee34ac9063 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -447,13 +447,16 @@ function Iframe( {
 	);
 
 	return (
-		<div className="block-editor-iframe__container" ref={ windowResizeRef }>
+		<div
+			className={ clsx(
+				'block-editor-iframe__container',
+				isZoomedOut && 'is-zoomed-out'
+			) }
+			ref={ windowResizeRef }
+		>
 			{ containerResizeListener }
 			<div
-				className={ clsx(
-					'block-editor-iframe__scale-container',
-					isZoomedOut && 'is-zoomed-out'
-				) }
+				className="block-editor-iframe__scale-container"
 				style={ {
 					'--wp-block-editor-iframe-zoom-out-container-width':
 						isZoomedOut && `${ containerWidth }px`,

From eb34bccd9c4cee2326bd65a5895a67948dd87b6a Mon Sep 17 00:00:00 2001
From: Mitchell Austin <mr.fye@oneandthesame.net>
Date: Fri, 21 Jun 2024 12:34:16 -0700
Subject: [PATCH 2/2] Reduce changes and let horizontal overflow remain hidden
 in device previews

---
 .../block-editor/src/components/iframe/content.scss |  8 ++------
 .../block-editor/src/components/iframe/index.js     | 13 +++++--------
 2 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
index 009766ff34875a..165cf70d24a710 100644
--- a/packages/block-editor/src/components/iframe/content.scss
+++ b/packages/block-editor/src/components/iframe/content.scss
@@ -5,11 +5,7 @@
 .block-editor-iframe__container {
 	width: 100%;
 	height: 100%;
-	overflow: auto;
-
-	&.is-zoomed-out {
-		overflow-x: hidden;
-	}
+	overflow-x: hidden;
 }
 
 .block-editor-iframe__scale-container {
@@ -17,7 +13,7 @@
 	height: 100%;
 }
 
-.is-zoomed-out.block-editor-iframe__container .block-editor-iframe__scale-container {
+.block-editor-iframe__scale-container.is-zoomed-out {
 	$container-width: var(--wp-block-editor-iframe-zoom-out-container-width, 100vw);
 	$prev-container-width: var(--wp-block-editor-iframe-zoom-out-prev-container-width, 100vw);
 	width: $prev-container-width;
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index a40fee34ac9063..669e2fe25a9fbb 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -447,16 +447,13 @@ function Iframe( {
 	);
 
 	return (
-		<div
-			className={ clsx(
-				'block-editor-iframe__container',
-				isZoomedOut && 'is-zoomed-out'
-			) }
-			ref={ windowResizeRef }
-		>
+		<div className="block-editor-iframe__container" ref={ windowResizeRef }>
 			{ containerResizeListener }
 			<div
-				className="block-editor-iframe__scale-container"
+				className={ clsx(
+					'block-editor-iframe__scale-container',
+					isZoomedOut && 'is-zoomed-out'
+				) }
 				style={ {
 					'--wp-block-editor-iframe-zoom-out-container-width':
 						isZoomedOut && `${ containerWidth }px`,