Fix UI misalignment of Filter by Price in TT1 theme

[kmanijak]

What

Adjust the Filter by Price styles in TT1 theme:

• sizing
• background-color

Fixes #10648

Why

Filter by Price was misaligned in TT1.

Testing Instructions

Please consider any edge cases this change may have, and also other areas of the product this may impact.

1. On TT1 theme
2. Create new post
3. Add Filter by Price and Products (Beta) so filter is displayed
4. Make sure it looks like on screenshots (nice UI alignment) and they're functional (change values)
5. Repeat on TT2 and TT3 to make sure they stayed untouched
6. Check on Chrome, Firefox, Safari

• Do not include in the Testing Notes
• Should be tested by the development team exclusively

Screenshots or screencast

Before	After

WooCommerce Visibility

Required:

• WooCommerce Core
• Feature plugin
• Experimental
• N/A

Checklist

Required:

• This PR has either a [type] label or a [skip-changelog] label.
• This PR is assigned to a milestone.

Conditional:

• This PR has a changelog description (if [skip-changelog] label is not present).
• This PR adds/removes a feature flag & I've updated this doc.
• This PR adds/removes an experimental interfaces, and I've updated this doc.
• This PR has been accessibility tested.
• This PR has had any necessary documentation added/updated.

Changelog

Filter by Price: fix the styles on TT1 theme.

[github-actions]

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-10732.zip

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

• Files with errors: 474
• Total errors: 2251

🎉 🎉 This PR does not introduce new TS errors.

_{comments-aggregator}

[github-actions]

Size Change: +85 B (0%)

Total Size: 1.43 MB

Filename	Size	Change
build/price-filter-rtl.css	2.69 kB	+14 B (+1%)
build/price-filter-wrapper-rtl.css	2.55 kB	+15 B (+1%)
build/price-filter-wrapper.css	2.54 kB	+15 B (+1%)
build/price-filter.css	2.69 kB	+15 B (+1%)
build/wc-all-blocks-style-rtl.css	29.2 kB	+12 B (0%)
build/wc-all-blocks-style.css	29.2 kB	+14 B (0%)

ℹ️ View Unchanged

Filename	Size
build/active-filters-frontend.js	8.57 kB
build/active-filters-rtl.css	1.99 kB
build/active-filters-wrapper--mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-but--e791dc6c-style.js	929 B
build/active-filters-wrapper-frontend.js	7.58 kB
build/active-filters-wrapper-rtl.css	1.85 kB
build/active-filters-wrapper.css	1.85 kB
build/active-filters.css	1.99 kB
build/active-filters.js	7.5 kB
build/add-to-cart-form-rtl.css	355 B
build/add-to-cart-form.css	354 B
build/all-products-frontend.js	9.95 kB
build/all-products-rtl.css	4.4 kB
build/all-products.css	4.39 kB
build/all-products.js	41.3 kB
build/all-reviews-rtl.css	1.79 kB
build/all-reviews.css	1.79 kB
build/all-reviews.js	7.76 kB
build/attribute-filter-frontend.js	22.9 kB
build/attribute-filter-rtl.css	4.14 kB
build/attribute-filter-wrapper-frontend.js	8.01 kB
build/attribute-filter-wrapper-rtl.css	4.01 kB
build/attribute-filter-wrapper.css	4.01 kB
build/attribute-filter.css	4.14 kB
build/attribute-filter.js	13.1 kB
build/blocks-checkout.js	35.1 kB
build/breadcrumbs-rtl.css	232 B
build/breadcrumbs.css	232 B
build/breadcrumbs.js	2.27 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js	1.34 kB
build/cart-blocks/cart-accepted-payment-methods-style.js	136 B
build/cart-blocks/cart-cross-sells-frontend.js	250 B
build/cart-blocks/cart-cross-sells-products--product-price-frontend.js	2.89 kB
build/cart-blocks/cart-cross-sells-products-frontend.js	3.73 kB
build/cart-blocks/cart-cross-sells-products-style.js	137 B
build/cart-blocks/cart-cross-sells-style.js	250 B
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js	5 kB
build/cart-blocks/cart-express-payment-frontend.js	711 B
build/cart-blocks/cart-express-payment-style.js	137 B
build/cart-blocks/cart-items-frontend.js	284 B
build/cart-blocks/cart-items-style.js	219 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js	5.34 kB
build/cart-blocks/cart-line-items-frontend.js	1.04 kB
build/cart-blocks/cart-line-items-style.js	136 B
build/cart-blocks/cart-order-summary-frontend.js	1.24 kB
build/cart-blocks/cart-order-summary-style.js	319 B
build/cart-blocks/cart-totals-frontend.js	287 B
build/cart-blocks/cart-totals-style.js	228 B
build/cart-blocks/empty-cart-frontend.js	352 B
build/cart-blocks/empty-cart-style.js	345 B
build/cart-blocks/filled-cart-frontend.js	652 B
build/cart-blocks/filled-cart-style.js	310 B
build/cart-blocks/order-summary-coupon-form-frontend.js	1.57 kB
build/cart-blocks/order-summary-coupon-form-style.js	137 B
build/cart-blocks/order-summary-discount-frontend.js	2.04 kB
build/cart-blocks/order-summary-discount-style.js	137 B
build/cart-blocks/order-summary-fee-frontend.js	271 B
build/cart-blocks/order-summary-fee-style.js	136 B
build/cart-blocks/order-summary-heading-frontend.js	325 B
build/cart-blocks/order-summary-heading-style.js	326 B
build/cart-blocks/order-summary-shipping-frontend.js	12 kB
build/cart-blocks/order-summary-shipping-style.js	177 B
build/cart-blocks/order-summary-subtotal-frontend.js	271 B
build/cart-blocks/order-summary-subtotal-style.js	136 B
build/cart-blocks/order-summary-taxes-frontend.js	433 B
build/cart-blocks/order-summary-taxes-style.js	178 B
build/cart-blocks/proceed-to-checkout-frontend.js	1.41 kB
build/cart-blocks/proceed-to-checkout-style.js	1.09 kB
build/cart-frontend.js	29.7 kB
build/cart-rtl.css	9.71 kB
build/cart.css	9.7 kB
build/cart.js	45 kB
build/catalog-sorting-rtl.css	256 B
build/catalog-sorting.css	256 B
build/catalog-sorting.js	1.71 kB
build/checkout-blocks/actions--checkout-blocks/terms-style.js	487 B
build/checkout-blocks/actions-frontend.js	1.81 kB
build/checkout-blocks/actions-style.js	680 B
build/checkout-blocks/billing-address-frontend.js	4.3 kB
build/checkout-blocks/billing-address-style.js	532 B
build/checkout-blocks/contact-information-frontend.js	2.03 kB
build/checkout-blocks/contact-information-style.js	606 B
build/checkout-blocks/express-payment-frontend.js	1.12 kB
build/checkout-blocks/fields-frontend.js	301 B
build/checkout-blocks/fields-style.js	249 B
build/checkout-blocks/order-note-frontend.js	1.1 kB
build/checkout-blocks/order-summary-cart-items-frontend.js	3.64 kB
build/checkout-blocks/order-summary-cart-items-style.js	137 B
build/checkout-blocks/order-summary-coupon-form-frontend.js	1.73 kB
build/checkout-blocks/order-summary-coupon-form-style.js	137 B
build/checkout-blocks/order-summary-discount-frontend.js	2.22 kB
build/checkout-blocks/order-summary-discount-style.js	138 B
build/checkout-blocks/order-summary-fee-frontend.js	274 B
build/checkout-blocks/order-summary-fee-style.js	137 B
build/checkout-blocks/order-summary-frontend.js	1.24 kB
build/checkout-blocks/order-summary-shipping-frontend.js	12 kB
build/checkout-blocks/order-summary-shipping-style.js	137 B
build/checkout-blocks/order-summary-style.js	318 B
build/checkout-blocks/order-summary-subtotal-frontend.js	272 B
build/checkout-blocks/order-summary-subtotal-style.js	137 B
build/checkout-blocks/order-summary-taxes-frontend.js	433 B
build/checkout-blocks/order-summary-taxes-style.js	178 B
build/checkout-blocks/payment-frontend.js	9.13 kB
build/checkout-blocks/payment-style.js	461 B
build/checkout-blocks/pickup-options-frontend.js	4.13 kB
build/checkout-blocks/pickup-options-style.js	440 B
build/checkout-blocks/shipping-address-frontend.js	4.28 kB
build/checkout-blocks/shipping-address-style.js	475 B
build/checkout-blocks/shipping-method-frontend.js	2.59 kB
build/checkout-blocks/shipping-method-style.js	1.35 kB
build/checkout-blocks/shipping-methods-frontend.js	5.68 kB
build/checkout-blocks/shipping-methods-style.js	416 B
build/checkout-blocks/terms-frontend.js	1.51 kB
build/checkout-blocks/terms-style.js	672 B
build/checkout-blocks/totals-frontend.js	333 B
build/checkout-blocks/totals-style.js	275 B
build/checkout-frontend.js	31.6 kB
build/checkout-rtl.css	9.08 kB
build/checkout.css	9.07 kB
build/checkout.js	47.7 kB
build/combobox-control-style-rtl.css	585 B
build/combobox-control-style.css	585 B
build/custom-select-control-style-rtl.css	479 B
build/custom-select-control-style.css	479 B
build/customer-account-rtl.css	388 B
build/customer-account.css	387 B
build/customer-account.js	3.18 kB
build/featured-category-rtl.css	971 B
build/featured-category.css	970 B
build/featured-category.js	14.9 kB
build/featured-product-rtl.css	1.02 kB
build/featured-product.css	1.02 kB
build/featured-product.js	15.1 kB
build/filter-wrapper-frontend.js	14.1 kB
build/filter-wrapper-rtl.css	375 B
build/filter-wrapper.css	375 B
build/filter-wrapper.js	2.39 kB
build/form-token-field-style-rtl.css	1.23 kB
build/form-token-field-style.css	1.22 kB
build/handpicked-products.js	7.96 kB
build/legacy-template-rtl.css	238 B
build/legacy-template.css	238 B
build/legacy-template.js	8.14 kB
build/mini-cart-component-frontend.js	30.7 kB
build/mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-button--mini-cart-contents---358acf4e-style.js	248 B
build/mini-cart-contents-block/cart-button--mini-cart-contents-block/checkout-button--mini-cart-contents---a5b7fa58-style.js	930 B
build/mini-cart-contents-block/cart-button-frontend.js	1.69 kB
build/mini-cart-contents-block/cart-button-style.js	384 B
build/mini-cart-contents-block/checkout-button-frontend.js	1.77 kB
build/mini-cart-contents-block/checkout-button-style.js	465 B
build/mini-cart-contents-block/empty-cart-frontend.js	358 B
build/mini-cart-contents-block/empty-cart-style.js	355 B
build/mini-cart-contents-block/filled-cart-frontend.js	267 B
build/mini-cart-contents-block/filled-cart-style.js	267 B
build/mini-cart-contents-block/footer-frontend.js	3.77 kB
build/mini-cart-contents-block/footer-rtl.css	400 B
build/mini-cart-contents-block/footer-style.js	2.35 kB
build/mini-cart-contents-block/footer.css	400 B
build/mini-cart-contents-block/items-frontend.js	228 B
build/mini-cart-contents-block/items-style.js	228 B
build/mini-cart-contents-block/products-table--product-image--product-title-style.js	316 B
build/mini-cart-contents-block/products-table-frontend.js	549 B
build/mini-cart-contents-block/products-table-rtl.css	2.12 kB
build/mini-cart-contents-block/products-table-style.js	5.32 kB
build/mini-cart-contents-block/products-table.css	2.11 kB
build/mini-cart-contents-block/shopping-button-frontend.js	487 B
build/mini-cart-contents-block/shopping-button-style.js	398 B
build/mini-cart-contents-block/title-frontend.js	1.86 kB
build/mini-cart-contents-block/title-items-counter-frontend.js	1.58 kB
build/mini-cart-contents-block/title-items-counter-style.js	301 B
build/mini-cart-contents-block/title-label-frontend.js	1.51 kB
build/mini-cart-contents-block/title-label-style.js	300 B
build/mini-cart-contents-block/title-style.js	437 B
build/mini-cart-contents-rtl.css	2.66 kB
build/mini-cart-contents.css	2.65 kB
build/mini-cart-contents.js	17.5 kB
build/mini-cart-frontend.js	2.79 kB
build/mini-cart-rtl.css	2.56 kB
build/mini-cart.css	2.56 kB
build/mini-cart.js	6.35 kB
build/packages-style-rtl.css	3.55 kB
build/packages-style.css	3.55 kB
build/price-filter-frontend.js	14.5 kB
build/price-filter-wrapper-frontend.js	8.57 kB
build/price-filter.js	8.53 kB
build/price-format.js	1.15 kB
build/product-add-to-cart--product-average-rating--product-button--product-image--product-price--product---1d132d69.js	273 B
build/product-add-to-cart--product-button--product-rating--product-rating-counter--product-rating-stars.js	150 B
build/product-add-to-cart--product-image--product-title.js	319 B
build/product-add-to-cart-frontend.js	8.5 kB
build/product-add-to-cart-rtl.css	1.35 kB
build/product-add-to-cart.css	1.36 kB
build/product-add-to-cart.js	8.56 kB
build/product-average-rating--product-button--product-image--product-price--product-rating--product-ratin--e23975b5.js	932 B
build/product-average-rating-frontend.js	1.71 kB
build/product-average-rating.js	400 B
build/product-best-sellers.js	8.32 kB
build/product-button-frontend.js	4.87 kB
build/product-button-interactivity-frontend.js	9.51 kB
build/product-button-rtl.css	1.12 kB
build/product-button.css	1.11 kB
build/product-button.js	3.88 kB
build/product-categories-rtl.css	651 B
build/product-categories.css	649 B
build/product-categories.js	2.72 kB
build/product-category.js	9.29 kB
build/product-collection.js	14.9 kB
build/product-details-rtl.css	394 B
build/product-details.css	391 B
build/product-gallery-large-image-rtl.css	295 B
build/product-gallery-large-image.css	295 B
build/product-gallery-large-image.js	2.03 kB
build/product-gallery-pager-rtl.css	289 B
build/product-gallery-pager.css	289 B
build/product-gallery-pager.js	3.5 kB
build/product-gallery-rtl.css	464 B
build/product-gallery-thumbnails-rtl.css	272 B
build/product-gallery-thumbnails.css	271 B
build/product-gallery-thumbnails.js	3.91 kB
build/product-gallery.css	462 B
build/product-gallery.js	7.51 kB
build/product-image-frontend.js	2.65 kB
build/product-image-gallery-rtl.css	304 B
build/product-image-gallery.css	303 B
build/product-image-rtl.css	922 B
build/product-image.css	920 B
build/product-image.js	1.51 kB
build/product-new.js	8.6 kB
build/product-on-sale.js	8.6 kB
build/product-price-frontend.js	247 B
build/product-price-rtl.css	667 B
build/product-price.css	665 B
build/product-price.js	1.65 kB
build/product-query-rtl.css	347 B
build/product-query.css	347 B
build/product-query.js	13.1 kB
build/product-rating-counter-frontend.js	2.01 kB
build/product-rating-counter.js	689 B
build/product-rating-frontend.js	2.35 kB
build/product-rating-rtl.css	244 B
build/product-rating-stars-frontend.js	2.25 kB
build/product-rating-stars-rtl.css	895 B
build/product-rating-stars.css	897 B
build/product-rating-stars.js	938 B
build/product-rating.css	244 B
build/product-rating.js	1.04 kB
build/product-results-count-rtl.css	228 B
build/product-results-count.css	228 B
build/product-results-count.js	1.66 kB
build/product-reviews-rtl.css	456 B
build/product-reviews.css	455 B
build/product-sale-badge-frontend.js	1.8 kB
build/product-sale-badge-rtl.css	369 B
build/product-sale-badge.css	370 B
build/product-sale-badge.js	671 B
build/product-search-rtl.css	415 B
build/product-search.css	415 B
build/product-search.js	2.63 kB
build/product-sku-frontend.js	1.84 kB
build/product-sku-rtl.css	237 B
build/product-sku.css	237 B
build/product-sku.js	521 B
build/product-stock-indicator-frontend.js	2.02 kB
build/product-stock-indicator-rtl.css	229 B
build/product-stock-indicator.css	229 B
build/product-stock-indicator.js	707 B
build/product-summary-frontend.js	2.18 kB
build/product-summary-rtl.css	546 B
build/product-summary.css	546 B
build/product-summary.js	916 B
build/product-tag.js	8.61 kB
build/product-template-rtl.css	418 B
build/product-template.css	418 B
build/product-template.js	3.43 kB
build/product-title-frontend.js	2.21 kB
build/product-title-rtl.css	688 B
build/product-title.css	689 B
build/product-title.js	964 B
build/product-top-rated.js	8.86 kB
build/products-by-attribute.js	9.63 kB
build/rating-filter-frontend.js	21.4 kB
build/rating-filter-rtl.css	4.2 kB
build/rating-filter-wrapper-frontend.js	6.63 kB
build/rating-filter-wrapper-rtl.css	4.07 kB
build/rating-filter-wrapper.css	4.07 kB
build/rating-filter.css	4.19 kB
build/rating-filter.js	6.88 kB
build/reviews-by-category-rtl.css	1.79 kB
build/reviews-by-category.css	1.79 kB
build/reviews-by-category.js	12 kB
build/reviews-by-product-rtl.css	1.79 kB
build/reviews-by-product.css	1.79 kB
build/reviews-by-product.js	13.1 kB
build/reviews-frontend.js	7.07 kB
build/single-product-rtl.css	375 B
build/single-product.css	375 B
build/single-product.js	11.2 kB
build/snackbar-notice-style-rtl.css	672 B
build/snackbar-notice-style.css	671 B
build/stock-filter-frontend.js	21.6 kB
build/stock-filter-rtl.css	4.01 kB
build/stock-filter-wrapper-frontend.js	6.82 kB
build/stock-filter-wrapper-rtl.css	3.88 kB
build/stock-filter-wrapper.css	3.88 kB
build/stock-filter.css	4.01 kB
build/stock-filter.js	7.6 kB
build/store-notices.js	1.69 kB
build/vendors--active-filters-wrapper--attribute-filter-wrapper--mini-cart-contents-block/cart-button--mi--d6bb29e6-style.js	606 B
build/vendors--attribute-filter-wrapper--cart-blocks/order-summary-coupon-form--cart-blocks/order-summary--48e1e4bb-frontend.js	6.84 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js	8.31 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-frontend.js	5.28 kB
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js	3.55 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js	19.4 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping--checkout-block--24d3fc0c-frontend.js	8.22 kB
build/vendors--cart-blocks/proceed-to-checkout-style.js	179 B
build/vendors--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js	5.6 kB
build/vendors--checkout-blocks/shipping-method-frontend.js	12.4 kB
build/vendors--checkout-blocks/shipping-method-style.js	11.7 kB
build/vendors--mini-cart-contents-block/products-table--price-filter-wrapper--product-price-style.js	5.27 kB
build/vendors--mini-cart-contents-block/products-table-style.js	3.16 kB
build/vendors--product-add-to-cart-frontend.js	7.52 kB
build/wc-blocks-classic-template-revert-button-style-rtl.css	237 B
build/wc-blocks-classic-template-revert-button-style.css	236 B
build/wc-blocks-classic-template-revert-button.js	1.53 kB
build/wc-blocks-data.js	21.9 kB
build/wc-blocks-editor-style-rtl.css	6.43 kB
build/wc-blocks-editor-style.css	6.44 kB
build/wc-blocks-google-analytics.js	1.55 kB
build/wc-blocks-middleware.js	934 B
build/wc-blocks-registry.js	3.19 kB
build/wc-blocks-rtl.css	2.46 kB
build/wc-blocks-shared-context.js	1.1 kB
build/wc-blocks-shared-hocs.js	1.63 kB
build/wc-blocks-vendors-style-rtl.css	1.95 kB
build/wc-blocks-vendors-style.css	1.95 kB
build/wc-blocks-vendors.js	65.5 kB
build/wc-blocks.css	2.46 kB
build/wc-blocks.js	2.62 kB
build/wc-interactivity.js	10.7 kB
build/wc-payment-method-bacs.js	817 B
build/wc-payment-method-cheque.js	813 B
build/wc-payment-method-cod.js	914 B
build/wc-payment-method-paypal.js	852 B
build/wc-settings.js	2.68 kB
build/wc-shipping-method-pickup-location.js	30.4 kB

_{compressed-size-action}

[albarin]

Looking good, thanks for all the small fixes 🙌