diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss index 84e8328393d7a9..2f8ab52f9e7022 100644 --- a/packages/edit-post/src/components/header/style.scss +++ b/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 { @@ -121,7 +103,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; diff --git a/packages/edit-site/src/components/header-edit-mode/style.scss b/packages/edit-site/src/components/header-edit-mode/style.scss index 710c20b4e15f15..6c08f128906937 100644 --- a/packages/edit-site/src/components/header-edit-mode/style.scss +++ b/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; } diff --git a/packages/interface/src/components/more-menu-dropdown/style.scss b/packages/interface/src/components/more-menu-dropdown/style.scss index 56852977fa05f7..a2b9b1481677ed 100644 --- a/packages/interface/src/components/more-menu-dropdown/style.scss +++ b/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() {