From 5abf70755ac0d86a8890e81fccdb5bc25628434d Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Mon, 17 Jan 2022 12:16:34 +0800
Subject: [PATCH] Fix overflow:hidden hides the bottom of tablet/mobile preview

---
 packages/edit-site/src/components/block-editor/style.scss | 8 ++++++++
 packages/edit-site/src/components/editor/style.scss       | 1 -
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss
index 08ee936012ef7..3baee4e66fa35 100644
--- a/packages/edit-site/src/components/block-editor/style.scss
+++ b/packages/edit-site/src/components/block-editor/style.scss
@@ -24,6 +24,12 @@
 		.edit-site-visual-editor__editor-canvas {
 			border-radius: $radius-block-ui;
 		}
+
+		// To hide the horizontal scrollbar and show the drag handle on the
+		// left and right of the container.
+		.components-resizable-box__container {
+			overflow: visible;
+		}
 	}
 }
 
@@ -42,6 +48,8 @@
 
 .components-resizable-box__container {
 	margin: 0 auto;
+	// Removing this will cancel the bottom margins in the iframe.
+	overflow: auto;
 }
 
 .resizable-editor__drag-handle {
diff --git a/packages/edit-site/src/components/editor/style.scss b/packages/edit-site/src/components/editor/style.scss
index 580268d00e967..384d80be9d049 100644
--- a/packages/edit-site/src/components/editor/style.scss
+++ b/packages/edit-site/src/components/editor/style.scss
@@ -32,7 +32,6 @@ html.wp-toolbar {
 	position: relative;
 	height: 100%;
 	display: block;
-	overflow: hidden;
 
 	iframe {
 		display: block;