We have corrected an issue where a scroll bar would show for certain experiences when you hover over the facets box, even though all facet options were already showing. We determined this issue occurs when an experience uses a custom font with a text height larger than the line height of the label.
We have added the variable --yxt-filter-options-option-label-line-height
to the answers-variables.scss
file, which controls the line height of the option label in the filter options component. This is now set explicitly in the theme and can be overridden if you add a custom font and see this issue. We have also made adjustments to the padding and margin of the facets to give more leeway with custom fonts.
Upgrade Implications:
If you are upgrading, you will not have this variable by default. To remedy this, copy the --yxt-filter-options-option-label-line-height
variable into your answers-variables.scss
file, like below.
// component specific variable overrides
--yxt-filters-and-sorts-font-size: var(--yxt-font-size-md);
--yxt-filter-options-option-label-line-height: 20px;
This feature is available in Early Access. Here’s how to use the Early Access branches of the Theme and SDK!