From d372296a5053f242f16c97efe875c23a106cdd2d Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 6 May 2024 09:35:56 +0100
Subject: [PATCH] Disable the Preview dropdown in zoom-out instead of hiding it

---
 .../edit-post/src/components/header/index.js  | 14 ++++----------
 .../src/components/header/style.scss          |  9 ---------
 .../src/components/header-edit-mode/index.js  | 19 +++++++------------
 .../components/header-edit-mode/style.scss    |  9 ---------
 4 files changed, 11 insertions(+), 40 deletions(-)

diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js
index c2c391ad390ee..86c928ff15766 100644
--- a/packages/edit-post/src/components/header/index.js
+++ b/packages/edit-post/src/components/header/index.js
@@ -135,16 +135,10 @@ function Header( { setEntitiesSavedStatesCallback, initialPost } ) {
 					// when the publish sidebar has been closed.
 					<PostSavedState forceIsDirty={ hasActiveMetaboxes } />
 				) }
-				<div
-					className={ classnames(
-						'edit-post-header__preview-options',
-						{ 'is-zoomed-out': isZoomedOutView }
-					) }
-				>
-					<PreviewDropdown
-						forceIsAutosaveable={ hasActiveMetaboxes }
-					/>
-				</div>
+				<PreviewDropdown
+					disabled={ isZoomedOutView }
+					forceIsAutosaveable={ hasActiveMetaboxes }
+				/>
 				<PostPreviewButton
 					className="edit-post-header__post-preview-button"
 					forceIsAutosaveable={ hasActiveMetaboxes }
diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
index 21422e24aec8f..93c1461774cbd 100644
--- a/packages/edit-post/src/components/header/style.scss
+++ b/packages/edit-post/src/components/header/style.scss
@@ -249,12 +249,3 @@
 .components-popover.more-menu-dropdown__content {
 	z-index: z-index(".components-popover.more-menu__content");
 }
-
-.edit-post-header__preview-options {
-	opacity: 1;
-	transition: opacity 0.3s;
-
-	&.is-zoomed-out {
-		opacity: 0;
-	}
-}
diff --git a/packages/edit-site/src/components/header-edit-mode/index.js b/packages/edit-site/src/components/header-edit-mode/index.js
index e0a4eab3677c6..921ff61dd23a1 100644
--- a/packages/edit-site/src/components/header-edit-mode/index.js
+++ b/packages/edit-site/src/components/header-edit-mode/index.js
@@ -147,18 +147,13 @@ export default function HeaderEditMode( { setEntitiesSavedStatesCallback } ) {
 					transition={ toolbarTransition }
 				>
 					{ isLargeViewport && (
-						<div
-							className={ clsx(
-								'edit-site-header-edit-mode__preview-options',
-								{ 'is-zoomed-out': isZoomedOutView }
-							) }
-						>
-							<PreviewDropdown
-								disabled={
-									isFocusMode || ! hasDefaultEditorCanvasView
-								}
-							/>
-						</div>
+						<PreviewDropdown
+							disabled={
+								isFocusMode ||
+								! hasDefaultEditorCanvasView ||
+								isZoomedOutView
+							}
+						/>
 					) }
 					<PostViewLink />
 					{
diff --git a/packages/edit-site/src/components/header-edit-mode/style.scss b/packages/edit-site/src/components/header-edit-mode/style.scss
index 5963a1c815141..39a1a3418395a 100644
--- a/packages/edit-site/src/components/header-edit-mode/style.scss
+++ b/packages/edit-site/src/components/header-edit-mode/style.scss
@@ -120,15 +120,6 @@
 	gap: $grid-unit-10;
 }
 
-.edit-site-header-edit-mode__preview-options {
-	opacity: 1;
-	transition: opacity 0.3s;
-
-	&.is-zoomed-out {
-		opacity: 0;
-	}
-}
-
 // Button text label styles
 
 .edit-site-header-edit-mode.show-icon-labels {