Fix the position and size of the Options menu, (#57515)

Co-authored-by: Carolina Nymark <[email protected]>

Author: afercia

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

@@ -12,24 +12,6 @@
 	@include break-zoomed-in {
 		flex-wrap: nowrap;
 	}
-
-	// Some browsers, most notably IE11, honor an older version of the flexbox spec
-	// which takes absolutely positioned items into account when calculating `space-between`.
-	// https://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#abspos-flex-items
-	//
-	// This difference is causing our header layout to break when focused in IE11.
-	// Our focused region styles use an absolutely positioned :after pseudo element to draw an outline,
-	// and IE11 is adding space between it and our last real child, shifting righthand UI elements
-	// to the left. For a workaround, we change the flex order to move the undesired spacing to the middle
-	// where it is no longer noticeable.
-	> .edit-post-header__settings {
-		order: 1;
-
-		// Restore default order for all other browsers
-		@supports (position: sticky) {
-			order: initial;
-		}
-	}
 }
 
 .edit-post-header__toolbar {
@@ -153,7 +135,7 @@
 	padding-right: $grid-unit-05;
 
 	@include break-small () {
-		padding-right: $grid-unit-20 - ($grid-unit-15 * 0.5);
+		padding-right: $grid-unit-10;
 	}
 
 	gap: $grid-unit-10;

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

@@ -86,7 +86,13 @@ $header-toolbar-min-width: 335px;
 .edit-site-header-edit-mode__actions {
 	display: inline-flex;
 	align-items: center;
-	padding-right: $grid-unit-10;
+	flex-wrap: nowrap;
+	padding-right: $grid-unit-05;
+
+	@include break-small () {
+		padding-right: $grid-unit-10;
+	}
+
 	gap: $grid-unit-10;
 }
 

packages/interface/src/components/more-menu-dropdown/style.scss

@@ -17,7 +17,7 @@
 }
 
 .interface-more-menu-dropdown__content .components-popover__content {
-	min-width: 280px;
+	min-width: 300px;
 
 	// Let the menu scale to fit items.
 	@include break-mobile() {