Revise mobile display of Document Bar

WordPress · Jul 3, 2024 · 7238351 · 7238351
1 parent 7212b8e
commit 7238351
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js
@@ -61,7 +61,7 @@ function Header( {
 } ) {
 	const isWideViewport = useViewportMatch( 'large' );
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const isTooNarrowForDocumentBar = useMediaQuery( '(max-width: 382px)' );
+	const isTooNarrowForDocumentBar = useMediaQuery( '(max-width: 403px)' );
 	const {
 		isTextEditor,
 		isPublishSidebarOpened,

diff --git a/packages/editor/src/components/header/style.scss b/packages/editor/src/components/header/style.scss
@@ -83,7 +83,12 @@
 	// At less than mobile the header’s `gap` is zero so margins are added to create a smaller
 	// gap around the center’s contents.
 	@media (max-width: #{$break-mobile - 1}) {
-		padding-inline: $grid-unit;
+		> :first-child {
+			margin-inline-start: $grid-unit;
+		}
+		> :last-child {
+			margin-inline-end: $grid-unit;
+		}
 	}
 }