From 5a11c2b4b2d220a370ed01094ded7174161f8ad3 Mon Sep 17 00:00:00 2001
From: Tetsuaki Hamano <tetsuaki.hamano@gmail.com>
Date: Tue, 12 Dec 2023 17:47:05 +0900
Subject: [PATCH 1/2] Editor Canvas: Fix animation when device type changes

---
 packages/editor/src/components/editor-canvas/index.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/editor/src/components/editor-canvas/index.js b/packages/editor/src/components/editor-canvas/index.js
index 921f3ce23c0ee4..4edfc05ce3a9a3 100644
--- a/packages/editor/src/components/editor-canvas/index.js
+++ b/packages/editor/src/components/editor-canvas/index.js
@@ -304,7 +304,12 @@ function EditorCanvas(
 			height="100%"
 			iframeProps={ {
 				...iframeProps,
-				style: { ...iframeProps?.style, ...deviceStyles },
+				style: {
+					...iframeProps?.style,
+					marginLeft: 'auto',
+					marginRight: 'auto',
+					...deviceStyles,
+				},
 			} }
 		>
 			{ themeSupportsLayout &&

From 1eb867c99479e7398da8a118c6f88eef194d061f Mon Sep 17 00:00:00 2001
From: Tetsuaki Hamano <tetsuaki.hamano@gmail.com>
Date: Tue, 12 Dec 2023 19:53:09 +0900
Subject: [PATCH 2/2] Include margin in deviceStyles

---
 .../block-editor/src/components/use-resize-canvas/README.md  | 2 +-
 .../block-editor/src/components/use-resize-canvas/index.js   | 5 ++++-
 packages/editor/src/components/editor-canvas/index.js        | 2 --
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/block-editor/src/components/use-resize-canvas/README.md b/packages/block-editor/src/components/use-resize-canvas/README.md
index 51e583f8def474..ce8f06adea5d82 100644
--- a/packages/block-editor/src/components/use-resize-canvas/README.md
+++ b/packages/block-editor/src/components/use-resize-canvas/README.md
@@ -1,6 +1,6 @@
 # useResizeCanvas
 
-This React hook generates inline CSS suitable for resizing a container to fit a device's dimensions. It adjusts the CSS according to the current device dimensions. It has no effect on desktop.
+This React hook generates inline CSS suitable for resizing a container to fit a device's dimensions. It adjusts the CSS according to the current device dimensions.
 
 On-page CSS media queries are also updated to match the width of the device.
 
diff --git a/packages/block-editor/src/components/use-resize-canvas/index.js b/packages/block-editor/src/components/use-resize-canvas/index.js
index fab0b7a15e2afd..a843f160056367 100644
--- a/packages/block-editor/src/components/use-resize-canvas/index.js
+++ b/packages/block-editor/src/components/use-resize-canvas/index.js
@@ -67,7 +67,10 @@ export default function useResizeCanvas( deviceType ) {
 					overflowY: 'auto',
 				};
 			default:
-				return null;
+				return {
+					marginLeft: marginHorizontal,
+					marginRight: marginHorizontal,
+				};
 		}
 	};
 
diff --git a/packages/editor/src/components/editor-canvas/index.js b/packages/editor/src/components/editor-canvas/index.js
index 4edfc05ce3a9a3..1f74dfd262ff54 100644
--- a/packages/editor/src/components/editor-canvas/index.js
+++ b/packages/editor/src/components/editor-canvas/index.js
@@ -306,8 +306,6 @@ function EditorCanvas(
 				...iframeProps,
 				style: {
 					...iframeProps?.style,
-					marginLeft: 'auto',
-					marginRight: 'auto',
 					...deviceStyles,
 				},
 			} }