diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index 6ff3bbc721a10..1f08727bbfb9b 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -125,9 +125,18 @@ display: none; } + // Add a scrim to the right of the collapsed button. + &.is-collapsed::after { + content: ""; + position: absolute; + left: 100%; + width: $grid-unit-60; + height: 100%; + background: linear-gradient(to right, $white, transparent); + } + // on desktop and tablet viewports the toolbar is fixed // on top of interface header - @include break-medium() { &.is-fixed { @@ -308,7 +317,7 @@ } } - // on tablet vewports the toolbar is fixed + // on tablet viewports the toolbar is fixed // on top of interface header and covers the whole header // except for the inserter on the left @include break-medium() { @@ -328,7 +337,7 @@ // in full screen mode we need to account for // the combined with of the tools at the right of the header and the margin left // of the toolbar which includes four buttons - width: calc(100% - 240px - #{4 * $grid-unit-80}); + width: calc(100% - 280px - #{4 * $grid-unit-80}); } } } diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss index 694dcb5a2d678..4a53be477e025 100644 --- a/packages/edit-post/src/components/header/header-toolbar/style.scss +++ b/packages/edit-post/src/components/header/header-toolbar/style.scss @@ -82,6 +82,10 @@ align-items: center; padding-left: $grid-unit-10; + // 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-small() { padding-left: $grid-unit-30; } diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss index 6fe0f858bcc69..a5a182cf7426f 100644 --- a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss +++ b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss @@ -13,6 +13,11 @@ border-radius: 4px; width: min(100%, 450px); + // Make the document title shorter in top-toolbar mode, as it has to be covered. + .has-fixed-toolbar & { + width: min(100%, 380px); + } + .components-button { &:hover { color: var(--wp-block-synced-color);