Commit 1e4756aac46 for woocommerce
commit 1e4756aac46439723c621d413703fa29f0072440
Author: Tung Du <dinhtungdu@gmail.com>
Date: Wed Sep 16 03:41:13 2026 -0700
Fix Product Filters price slider horizontal overflow (#68746)
* Fix Product Filters price slider horizontal overflow
Remove ±2px min/max thumb offsets that overflowed when the filters
wrapper had overflow-x (including via overflow-y: auto).
Closes #68485.
* Add changefile(s) from automation for the following project(s): woocommerce
* Remove duplicate changelog and PR screenshot assets from the branch
Keep the automation changefile. Screenshots belong in the PR description,
not in the repository.
* fix: preserve Firefox price slider alignment
---------
Co-authored-by: Tung Du <tung.du@a8c.com>
Co-authored-by: woocommercebot <woocommercebot@users.noreply.github.com>
diff --git a/plugins/woocommerce/changelog/68746-fix-wooplug-7706-price-slider-overflow b/plugins/woocommerce/changelog/68746-fix-wooplug-7706-price-slider-overflow
new file mode 100644
index 00000000000..21e96b867c4
--- /dev/null
+++ b/plugins/woocommerce/changelog/68746-fix-wooplug-7706-price-slider-overflow
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Prevent Product Filters price slider thumbs from causing horizontal overflow in scrollable filter panels.
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/price-slider/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/price-slider/style.scss
index 979a5d4ba1f..603e60c5ba3 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/price-slider/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/price-slider/style.scss
@@ -183,12 +183,11 @@
&.min {
&::-webkit-slider-thumb {
- margin-left: -2px;
background-position-x: left;
}
&::-moz-range-thumb {
background-position-x: left;
- transform: translate(-2px, 2px);
+ transform: translateY(2px);
}
&::-ms-thumb {
background-position-x: left;
@@ -198,11 +197,10 @@
&.max {
&::-webkit-slider-thumb {
background-position-x: right;
- margin-left: 2px;
}
&::-moz-range-thumb {
background-position-x: right;
- transform: translate(2px, 2px);
+ transform: translateY(2px);
}
&::-ms-thumb {
background-position-x: right;