Fix alignment issue with hover label on wide and fullwide (#7090)

* Fix alignment issue with hover label on wide and fullwide

The hoverlabel on wide wasn't flush with the side.

The hoverlabel on fullwide was 1px off.

This PR fixes that.

* Fix positioning of Shared Blocks interface.

Shared blocks had the interface for renaming and the indicator wrongly offset by the new parent block padding. This fixes it.

core-blocks/block/edit-panel/style.scss

@@ -1,15 +1,21 @@
-.shared-block-edit-panel {
+.editor-block-list__layout .shared-block-edit-panel {
 	align-items: center;
 	background: $light-gray-100;
 	color: $dark-gray-500;
 	display: flex;
 	flex-wrap: wrap;
 	font-family: $default-font;
 	font-size: $default-font-size;
-	margin: 0 (-$block-padding);
-	padding: 10px $block-padding;
 	position: relative;
 	top: $block-padding;
+	margin: 0 (-$parent-block-padding);
+	padding: 10px $parent-block-padding;
+
+	// Show a smaller padding when nested.
+	.editor-block-list__layout & {
+		margin: 0 (-$block-padding);
+		padding: 10px $block-padding;
+	}
 
 	.shared-block-edit-panel__spinner {
 		margin: 0 5px;

core-blocks/block/indicator/style.scss

@@ -1,4 +1,4 @@
-.shared-block-indicator {
+.editor-block-list__layout .shared-block-indicator {
 	background: $white;
 	border-left: 1px dashed $light-gray-500;
 	color: $dark-gray-500;
@@ -7,6 +7,11 @@
 	height: 30px;
 	padding: 5px;
 	position: absolute;
-	right: -$block-padding;
 	width: 30px;
+	right: -$parent-block-padding;
+
+	// Show less offset in nested contexts.
+	.editor-block-list__layout & {
+		right: -$block-padding;
+	}
 }

editor/components/block-list/style.scss

@@ -378,12 +378,8 @@
 
 		// Without z-index, the block toolbar will be below an adjecent float
 		z-index: z-index( '.editor-block-list__block {core/image aligned wide or fullwide}' );
-	}
 
-	// Wide and full-wide
-	&[data-align="wide"],
-	&[data-align="full"] {
-			// Mover and settings above
+		// Mover and settings above
 		> .editor-block-mover,
 		> .editor-block-settings-menu {
 			top: -$block-side-ui-width - 1px; // move upwards the height of the button +1px for border
@@ -421,7 +417,7 @@
 
 		// Position hover label on the right
 		> .editor-block-list__breadcrumb {
-			right: 0;
+			right: -1px;
 		}
 
 		// Hide mover until wide breakpoints, or it might be covered by toolbar
@@ -435,9 +431,22 @@
 		}
 	}
 
+	// Wide
+	&[data-align="wide"] {
+		// Position hover label on the right
+		> .editor-block-list__breadcrumb {
+			right: -$block-padding;
+		}
+	}
+
 	// Full-wide
 	&[data-align="full"] {
 
+		// Position hover label on the right
+		> .editor-block-list__breadcrumb {
+			right: -1px;
+		}
+
 		// compensate for main container padding, subtract border
 		@include break-small() {
 			margin-left: -$block-side-ui-padding + 1px;