WooCommerce Filter by Price block fields padding issue in Assembler theme

[marissaexplores]

Quick summary

The Filter by Price block fields do not show the whole min/max price.

This issue is occurring because of the padding on the field.

I've tested the field in other themes like Twenty Twenty-Four, Tazza, and Tsubaki. This issue does not occur in those themes because they have set the input field padding to padding: 8px;, while Assembler has it set at padding:0.8rem 1rem;.

Steps to reproduce

1. Install Assembler theme
2. Go to Appearance > Editor > Templates > Product Catalog
3. Add the Filter by Price block to the page
4. View the min/max fields are cutting-off the prices

A clear and concise description of what you expected to happen.

The user expects to see the whole number in the min/max fields of the Filter by Price block.

What actually happened

The padding prevents users from seeing the whole price in the fields.

Impact

Some (< 50%)

Available workarounds?

Yes, easy to implement

If the above answer is "Yes...", outline the workaround.

Add this CSS as a workaround:

.wc-block-price-slider input:not([type="submit"]):not([type="checkbox"]) {
padding: 8px;
}

Platform (Simple and/or Atomic)

Atomic

Logs or notes

I am currently only seeing this issue in the Assembler theme.

[retnonindya]

📌 REPRODUCTION RESULTS Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO

I also noticed the slider (?) overlaps with the price box.

📌 ACTIONS

• Triaged

[agrullon95]

Hey @MaggieCabrera, I am checking if this is still on your radar. Thanks!

[MaggieCabrera]

the PR is done and waiting for review @agrullon95