Post Editor Header: Make block toolbar toggle button focus visible (W…

…ordPress#59781)

* Post Editor Header: Make block toolbar toggle button focus visible

* Use CSS variable

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>

packages/edit-post/src/components/header/style.scss

@@ -25,6 +25,10 @@
 	// Leave enough room for the focus ring to show.
 	padding: 2px 0;
 	align-items: center;
+	// Allow focus ring to be fully visible on furthest right button.
+	@include break-medium() {
+		padding-right: var(--wp-admin-border-width-focus);
+	}
 
 	.table-of-contents {
 		display: none;

packages/edit-site/src/components/header-edit-mode/style.scss

@@ -21,9 +21,9 @@
 		height: 100%;
 		// Allow focus ring to be fully visible on furthest right button.
 		@include break-medium() {
+			padding-right: var(--wp-admin-border-width-focus);
 			// Account for the site hub, which is 60x60px.
 			flex-basis: calc(37.5% - 60px);
-			padding-right: 2px;
 			// We need this to be overflow hidden so the block toolbar can
 			// overflow scroll. If the overflow is visible, flexbox allows
 			// the toolbar to grow outside of the allowed container space.