diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index 2dce584d86bf9..077acc4964db1 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -143,6 +143,10 @@ // has to be flex for collapse button to fit display: flex; + //hide overflow and scroll + overflow: hidden; + overflow-x: scroll; + &.is-collapsed { width: initial; } @@ -150,7 +154,7 @@ .is-fullscreen-mode & { // leave room for block inserter, undo and redo, list view // and some margin left - margin-left: $grid-unit-80 * 4 - 2 * $grid-unit + $grid-unit-05; + margin-left: $grid-unit-80 * 4 - 2 * $grid-unit; top: $grid-unit - $border-width; &.is-collapsed { width: initial; @@ -170,7 +174,7 @@ margin-right: 0; background-color: $gray-300; position: relative; - left: -$grid-unit-05; + left: math.div(-$grid-unit-05, 2); top: -1px; } } @@ -210,6 +214,7 @@ border: none; .show-icon-labels & { + width: $grid-unit-80 * 4; .components-button.has-icon { // Hide the button icons when labels are set to display... svg { @@ -231,7 +236,7 @@ margin-bottom: $grid-unit + $grid-unit-05; background-color: $gray-300; position: relative; - left: -10px; + left: -8px; height: 3 * $grid-unit; top: -1px; } @@ -321,7 +326,9 @@ // for the block inserter the publish button @include break-large() { &.is-fixed { - width: initial; + // 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}); } } 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 63c4d5198f8fb..6281887b13738 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 @@ -16,6 +16,14 @@ color: currentColor; background: $gray-200; } + + @include break-medium() { + width: 50%; + } + + @include break-large() { + width: min(100%, 450px); + } } .edit-site-document-actions__command { diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss index 65a581503cbc8..2fe210327661d 100644 --- a/packages/edit-site/src/components/layout/style.scss +++ b/packages/edit-site/src/components/layout/style.scss @@ -4,18 +4,6 @@ color: $gray-400; display: flex; flex-direction: column; - - // Expand the fixed block toolbar to cover the document title control. - .block-editor-block-contextual-toolbar { - @include break-medium() { - &.is-fixed { - // 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}); - } - } - } - } .edit-site-layout__hub {