react icon indicating copy to clipboard operation
react copied to clipboard

`ActionList.Item` `active` prop changes text weight, which can cause the item/menu width to shift when toggled

Open iansan5653 opened this issue 7 months ago • 0 comments

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.

iansan5653 avatar Jun 03 '25 18:06 iansan5653