Remove the left toolbar border on mobile screens.

This fixes some visual bugs with themes like TwentyNineteen, which include margins on either side of the block on mobile.
WordPress · Mar 15, 2019 · 9b5325f · 9b5325f
1 parent c3b6c3b
commit 9b5325f
Showing 1 changed file with 10 additions and 9 deletions.
diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -5,19 +5,20 @@
 	overflow: auto; // Allow horizontal scrolling on mobile.
 	position: relative;
 	transition: border-color 0.1s linear, box-shadow 0.1s linear;
-
-	// Show a left border on the parent container.
-	border-left: none;
-	box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;
-
-	// Show a lighter version for dark themes.
-	.is-dark-theme & {
-		box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
-	}
+	border-left: $border-width solid $light-gray-800;
 
 	@include break-small() {
 		// Allow overflow on desktop.
 		overflow: inherit;
+
+		// Show a left border on the parent container.
+		border-left: none;
+		box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;
+
+		// Show a lighter version for dark themes.
+		.is-dark-theme & {
+			box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
+		}
 	}
 
 	// The component is born with a border, but we only need some of them.