From 047e1e489a594f6f1ad9d0475e87af389f4071bf Mon Sep 17 00:00:00 2001
From: Kjell Reigstad <kjell@kjellr.com>
Date: Tue, 12 Mar 2019 14:40:40 -0400
Subject: [PATCH] Improve border position for mobile screens, especially for
 elements that float left/right.

---
 .../src/components/block-list/style.scss       | 18 ++++++++++++++++--
 .../src/components/block-toolbar/style.scss    | 16 +++++++++-------
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index e85a7f268751fb..9dc02d2ca90476 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -315,7 +315,7 @@
 		// Position toolbar better on mobile.
 		.editor-block-contextual-toolbar {
 			width: auto;
-			border-bottom: $border-width solid $light-gray-500;
+			border-bottom: $border-width solid $light-gray-800;
 			bottom: auto;
 		}
 	}
@@ -833,11 +833,25 @@
 		}
 	}
 
-	// Floated items have special needs for the contextual toolbar position.
+	// Floated items have special needs for the contextual toolbar position + the thicker left border.
 	&[data-align="left"] .editor-block-contextual-toolbar,
 	&[data-align="right"] .editor-block-contextual-toolbar {
 		margin-bottom: $border-width;
 		margin-top: -$block-toolbar-height;
+
+		// Display the box-shadow on the parent element.
+		box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;
+		.is-dark-theme & {
+			box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
+		}
+
+		@include break-small() {
+			box-shadow: none;
+		}
+
+		.editor-block-toolbar {
+			border-left: none;
+		}
 	}
 
 	// Make block toolbar full width on mobile.
diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
index 37475b2c278dfb..7b46afb73a1282 100644
--- a/packages/block-editor/src/components/block-toolbar/style.scss
+++ b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -4,19 +4,21 @@
 	width: 100%;
 	overflow: auto; // Allow horizontal scrolling on mobile.
 	position: relative;
+	border-left: $border-width solid $light-gray-800;
 	transition: border-color 0.1s linear, box-shadow 0.1s linear;
 
-	// Allow overflow on desktop.
 	@include break-small() {
+		// Allow overflow on desktop.
 		overflow: inherit;
-	}
 
-	// Show a left border on the parent container.
-	box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;
+		// 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;
+		// 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.