react
react copied to clipboard
`ActionList.Item` `active` prop changes text weight, which can cause the item/menu width to shift when toggled
When the active prop is applied to an ActionList.Item, the width of the text changes because the weight of the text changes. For dynamically sized menus, this can cause the entire menu to change in width depending on which item is selected:
https://github.com/user-attachments/assets/36505a02-fe34-4523-8d00-7c7fb89c090c
For now, I've worked around this with a hack to disable bold styling when the active prop is applied, but this is a pretty bad solution:
.suggestion[data-active] > div > span > span {
font-weight: var(--base-text-weight-normal);
}
Ideally, the item would compensate for the width of the potentially bold text, possibly by rendering a hidden duplicate of the text in bold.