diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss index 65670ff655292..803943cd2de8b 100644 --- a/packages/block-editor/src/components/block-mover/style.scss +++ b/packages/block-editor/src/components/block-mover/style.scss @@ -15,8 +15,14 @@ .block-editor-block-mover { .components-toolbar-group, .components-toolbar { - flex-direction: column; flex: 1; + + // Increase touch targets on mobile. + flex-direction: row; + + @include break-small() { + flex-direction: column; + } } &.is-horizontal .components-toolbar-group, @@ -25,42 +31,48 @@ } .block-editor-block-mover-button { - height: $block-toolbar-height/2; - width: $block-toolbar-height; - padding: 0 !important; + @include break-small() { + padding: 0 !important; + height: $block-toolbar-height/2; + width: $block-toolbar-height; + } // Focus style. // Overrides .components-toolbar-group styles &::before { - left: 0 !important; - right: 0 !important; + @include break-small() { + left: $grid-unit-10 !important; + right: $grid-unit-10 !important; + } } } // Position the icons correctly. - .components-toolbar-group .block-editor-block-mover-button.is-up-button, - .components-toolbar .block-editor-block-mover-button.is-up-button { - svg { - margin-bottom: -$grid-unit-10; - } + @include break-small() { + .components-toolbar-group .block-editor-block-mover-button.is-up-button, + .components-toolbar .block-editor-block-mover-button.is-up-button { + svg { + margin-bottom: -$grid-unit-10; + } - // Focus style. - &::before { - bottom: 0; - height: calc(100% - #{ $border-width }); + // Focus style. + &::before { + bottom: 0; + height: calc(100% - #{ $border-width }); + } } - } - .components-toolbar-group .block-editor-block-mover-button.is-down-button, - .components-toolbar .block-editor-block-mover-button.is-down-button { - svg { - margin-top: -$grid-unit-10; - } + .components-toolbar-group .block-editor-block-mover-button.is-down-button, + .components-toolbar .block-editor-block-mover-button.is-down-button { + svg { + margin-top: -$grid-unit-10; + } - // Focus style. - &::before { - top: 0; - height: calc(100% - #{ $border-width }); + // Focus style. + &::before { + top: 0; + height: calc(100% - #{ $border-width }); + } } } @@ -70,7 +82,6 @@ height: $block-toolbar-height; // Overrides .components-toolbar-group styles width: $block-toolbar-height / 2; - min-width: $grid-unit-30; padding-left: 0; padding-right: 0; diff --git a/packages/components/src/toolbar-group/style.scss b/packages/components/src/toolbar-group/style.scss index 2bab095e5a47d..08a3141f6b288 100644 --- a/packages/components/src/toolbar-group/style.scss +++ b/packages/components/src/toolbar-group/style.scss @@ -92,7 +92,7 @@ div.components-toolbar { } // Last button in a group. -.components-accessible-toolbar .components-toolbar-group > .components-button:last-child.has-icon, +.components-accessible-toolbar .components-toolbar-group > .components-button:last-of-type.has-icon, .components-accessible-toolbar .components-toolbar-group > div:last-child > .components-button.has-icon, .components-toolbar div:last-child .components-button.has-icon { min-width: $block-toolbar-height - $grid-unit-15 / 2;