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 b87da10d6db6e..96b26368032ea 100644 --- a/packages/edit-site/src/components/header-edit-mode/style.scss +++ b/packages/edit-site/src/components/header-edit-mode/style.scss @@ -1,5 +1,3 @@ -$header-toolbar-min-width: 335px; - .edit-site-header-edit-mode { height: $header-height; align-items: center; @@ -16,46 +14,62 @@ $header-toolbar-min-width: 335px; display: flex; border: none; align-items: center; + flex-grow: 1; flex-shrink: 2; - // 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. - overflow: hidden; // Take up the full height of the header so the border focus // is visible on toolbar buttons. height: 100%; // Allow focus ring to be fully visible on furthest right button. @include break-medium() { + // 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. + overflow: hidden; } } .edit-site-header-edit-mode__end { display: flex; justify-content: flex-end; + height: 100%; + flex-grow: 1; + flex-shrink: 1; + + @include break-medium() { + flex-basis: 37.5%; + } } .edit-site-header-edit-mode__center { - display: flex; align-items: center; - height: 100%; + display: flex; + flex-basis: 100%; flex-grow: 1; - margin: 0 $grid-unit-20; + flex-shrink: 2; + height: 100%; justify-content: center; + // Flex items will, by default, refuse to shrink below a minimum // intrinsic width. In order to shrink this flexbox item, and // subsequently truncate child text, we set an explicit min-width. // See https://dev.w3.org/csswg/css-flexbox/#min-size-auto min-width: 0; + + @include break-medium() { + flex-basis: 25%; + } } } .edit-site-header-edit-mode__toolbar { - display: flex; align-items: center; - padding-left: $grid-unit-20; + display: flex; gap: $grid-unit-10; + padding-left: $grid-unit-20; @include break-medium() { padding-left: $grid-unit-50 * 0.5; @@ -87,12 +101,9 @@ $header-toolbar-min-width: 335px; display: inline-flex; align-items: center; flex-wrap: nowrap; - padding-right: $grid-unit-05; - - @include break-small () { - padding-right: $grid-unit-10; - } - + // Ensure actions do not press against .edit-site-header-edit-mode__center. + padding-left: $grid-unit-10; + padding-right: $grid-unit-10; gap: $grid-unit-10; } diff --git a/packages/editor/src/components/document-bar/style.scss b/packages/editor/src/components/document-bar/style.scss index 6ccc94e571f80..7e51605ad3028 100644 --- a/packages/editor/src/components/document-bar/style.scss +++ b/packages/editor/src/components/document-bar/style.scss @@ -10,7 +10,7 @@ min-width: 0; background: $gray-100; border-radius: $grid-unit-05; - width: min(100%, 450px); + width: min(100%, 416px); &:hover { background-color: $gray-200; @@ -47,8 +47,8 @@ align-items: center; // Offset the layout based on the width of the ⌘K label. This ensures the title is centrally aligned. - @include break-small() { - padding-left: $grid-unit-40; + @include break-medium() { + padding-left: $grid-unit-30; } .editor-document-bar.is-global & { @@ -64,14 +64,14 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - max-width: 50%; + max-width: 70%; color: currentColor; } } .editor-document-bar__shortcut { color: $gray-800; - min-width: $grid-unit-40; + min-width: $grid-unit-30; display: none; @include break-medium() { diff --git a/packages/editor/src/components/document-tools/style.scss b/packages/editor/src/components/document-tools/style.scss index 2aa39b1cbed85..4dc1bdff7a8f9 100644 --- a/packages/editor/src/components/document-tools/style.scss +++ b/packages/editor/src/components/document-tools/style.scss @@ -3,10 +3,11 @@ align-items: center; // Hide all action buttons except the inserter on mobile. - .editor-document-tools__left > .components-button { + .editor-document-tools__left > .editor-history__redo, + .editor-document-tools__left > .editor-history__undo { display: none; - @include break-small() { + @include break-medium() { display: inline-flex; } } @@ -70,14 +71,6 @@ // Some plugins add buttons here despite best practices. // Push them a bit rightwards to fit the top toolbar. margin-right: $grid-unit-10; - - @include break-medium() { - padding-left: $grid-unit-50 * 0.5; - } - - @include break-wide() { - padding-right: $grid-unit-10; - } } .editor-document-tools .editor-document-tools__left > .editor-document-tools__inserter-toggle.has-icon { diff --git a/packages/interface/src/components/pinned-items/style.scss b/packages/interface/src/components/pinned-items/style.scss index 420b94e2994b1..d678e0ada8e73 100644 --- a/packages/interface/src/components/pinned-items/style.scss +++ b/packages/interface/src/components/pinned-items/style.scss @@ -10,8 +10,7 @@ &[aria-controls="edit-post:document"], &[aria-controls="edit-post:block"], &[aria-controls="edit-site:template"], - &[aria-controls="edit-site:block-inspector"], - &[aria-controls="edit-site:global-styles"] { + &[aria-controls="edit-site:block-inspector"] { display: flex; }