diff --git a/plugins/woocommerce-admin/packages/components/src/filters/advanced/style.scss b/plugins/woocommerce-admin/packages/components/src/filters/advanced/style.scss index 0d1775c99dd..6974286eb38 100644 --- a/plugins/woocommerce-admin/packages/components/src/filters/advanced/style.scss +++ b/plugins/woocommerce-admin/packages/components/src/filters/advanced/style.scss @@ -25,6 +25,10 @@ margin: $gap 0; border: 1px solid $core-grey-light-700; } + + @include breakpoint( '<400px' ) { + margin: $gap-smaller 0; + } } .woocommerce-filters-advanced__title-select { @@ -57,11 +61,23 @@ width: 40px; height: 38px; align-self: center; + + @include breakpoint( '<400px' ) { + position: absolute; + top: 0; + right: $gap-smallest; + } } .components-form-token-field { border-radius: 4px; } + + @include breakpoint( '<400px' ) { + display: block; + position: relative; + padding: $gap-smaller $gap-smaller 0 0; + } } .woocommerce-filters-advanced__add-filter { @@ -95,8 +111,8 @@ } @include breakpoint( '<400px' ) { - display: block; - margin: 0; + //display: block; + //margin: 0; } } diff --git a/plugins/woocommerce-admin/packages/components/src/filters/style.scss b/plugins/woocommerce-admin/packages/components/src/filters/style.scss index a33b434e36b..366b9d7ad9e 100644 --- a/plugins/woocommerce-admin/packages/components/src/filters/style.scss +++ b/plugins/woocommerce-admin/packages/components/src/filters/style.scss @@ -4,6 +4,11 @@ .components-base-control__field { margin-bottom: 0; } + + @include breakpoint( '<400px' ) { + margin-left: -8px; + margin-right: -8px; + } } .woocommerce-filters__basic-filters {