Fix blurry edge along editor header with Distraction Free (#64277)

* use box-shadow instead of border * revert post-preview break-mobile * Fix Co-authored-by: richtabor <richtabor@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org>
WordPress · Sep 5, 2024 · 8b452c2 · 8b452c2 · github-actions · Sep 5, 2024
1 parent 7cf62f7
commit 8b452c2
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -70,7 +70,7 @@
 	// Raise the specificity.
 	&.components-accessible-toolbar {
 		border: none;
-		border-bottom: $border-width solid $gray-200;
+		box-shadow: 0 $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
 		border-radius: 0;
 	}
 

diff --git a/packages/editor/src/components/header/style.scss b/packages/editor/src/components/header/style.scss
@@ -243,7 +243,7 @@
 		width: 100%;
 
 		@include break-medium {
-			border-bottom: 1px solid #e0e0e0;
+			box-shadow: 0 $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
 			position: absolute;
 		}