[Bug]: Caret overlaps with selected content

[nwalters512]

Bug description

This is visible with the "Theme" selector on the "Basic Examples" page: https://tom-select.js.org/examples/

Expected behavior

I would expect the selected item to not overlap with the caret.

Steps to reproduce

1. Visit https://tom-select.js.org/examples/
2. Observe the visual overlap

Additional context

This visual bug appeared on all devices + browsers I tested with:

• macOS Chrome
• macOS Safari
• macOS Firefox
• iOS Safari

[nwalters512]

From what I can tell, this is an issue with this:

https://github.com/orchidjs/tom-select/blame/69180fa9e79060060f1824fbde85537579d0005d/src/scss/tom-select.scss#L84

If I change the declaration of --ts-pr-clear-button from 0 to 0rem, the calculation works and the right padding is as expected. From what I can tell, 0 + 2rem just evaluates to 0 for some reason? Looking at the "Computed" styles for .ts-control in my browser devtools, padding-right is 0px when the display is broken.

[rproserpio]

0 is not unit-compatible so the resulting value is invalid.
But since a css variable is used, the rule is not invalid at parse time but at computed-value time, and has already overridden the fallback rules.

[MatTheCat]

Hit by this one and came to the same conclusion: --ts-pr-clear-button should have a unit even when it’s 0.

BTW the 1em value does not seem to match the “button”’s width. my mistake this was due to an override in my codebase 😓

I see this has been reported some months ago; should I open a PR?

[nwalters512]

@MatTheCat a PR would be greatly appreciated!

[MatTheCat]

Here we go! #819