From 54eee32b043ff1879cba2f82f9d5568df43bc34c Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Wed, 21 Aug 2024 20:34:16 -0400
Subject: [PATCH] Make Distraction Free not conditional on viewport width
 (#63949)

* check for isWideViewport

* make distraction free always available

* Ensure mobile styles work with and without distraction free

* use isLargeViewport "medium" instead

* use ! isMobileViewport instead of isLargeViewport
---
 packages/editor/src/components/editor-interface/index.js | 6 ++----
 packages/editor/src/components/header/style.scss         | 9 ++++++---
 .../interface/src/components/interface-skeleton/index.js | 8 ++++----
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/editor/src/components/editor-interface/index.js b/packages/editor/src/components/editor-interface/index.js
index 5b0aea5400d7ba..848767f856ce7b 100644
--- a/packages/editor/src/components/editor-interface/index.js
+++ b/packages/editor/src/components/editor-interface/index.js
@@ -99,7 +99,6 @@ export default function EditorInterface( {
 				select( blockEditorStore ).__unstableGetEditorMode(),
 		};
 	}, [] );
-	const isWideViewport = useViewportMatch( 'large' );
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const secondarySidebarLabel = isListViewOpened
 		? __( 'Document Overview' )
@@ -122,11 +121,10 @@ export default function EditorInterface( {
 	return (
 		<InterfaceSkeleton
 			enableRegionNavigation={ enableRegionNavigation }
-			isDistractionFree={ isDistractionFree && isWideViewport }
+			isDistractionFree={ isDistractionFree }
 			className={ clsx( 'editor-editor-interface', className, {
 				'is-entity-save-view-open': !! entitiesSavedStatesCallback,
-				'is-distraction-free':
-					isDistractionFree && isWideViewport && ! isPreviewMode,
+				'is-distraction-free': isDistractionFree && ! isPreviewMode,
 			} ) }
 			labels={ {
 				...interfaceLabels,
diff --git a/packages/editor/src/components/header/style.scss b/packages/editor/src/components/header/style.scss
index de690d89a66ae4..99c9cc70e166e4 100644
--- a/packages/editor/src/components/header/style.scss
+++ b/packages/editor/src/components/header/style.scss
@@ -228,7 +228,7 @@
 }
 
 .editor-header__post-preview-button {
-	@include break-small {
+	@include break-mobile {
 		display: none;
 	}
 }
@@ -240,10 +240,13 @@
 
 	.editor-header {
 		background-color: $white;
-		border-bottom: 1px solid #e0e0e0;
-		position: absolute;
 		width: 100%;
 
+		@include break-medium {
+			border-bottom: 1px solid #e0e0e0;
+			position: absolute;
+		}
+
 
 		// hide some parts
 		& > .edit-post-header__settings > .edit-post-header__post-preview-button {
diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js
index 14b2a87ba5203d..a1fd20b642206f 100644
--- a/packages/interface/src/components/interface-skeleton/index.js
+++ b/packages/interface/src/components/interface-skeleton/index.js
@@ -143,22 +143,22 @@ function InterfaceSkeleton(
 							className="interface-interface-skeleton__header"
 							aria-label={ mergedLabels.header }
 							initial={
-								isDistractionFree
+								isDistractionFree && ! isMobileViewport
 									? 'distractionFreeHidden'
 									: 'hidden'
 							}
 							whileHover={
-								isDistractionFree
+								isDistractionFree && ! isMobileViewport
 									? 'distractionFreeHover'
 									: 'visible'
 							}
 							animate={
-								isDistractionFree
+								isDistractionFree && ! isMobileViewport
 									? 'distractionFreeDisabled'
 									: 'visible'
 							}
 							exit={
-								isDistractionFree
+								isDistractionFree && ! isMobileViewport
 									? 'distractionFreeHidden'
 									: 'hidden'
 							}