Menu item overflows on really long text.

[Sébastien Labine]

When a menu item is really long, the text overflows due to the fact that the height is pre-defined.

h-8 {
  height: 2rem;
}
![image](https://user-images.githubusercontent.com/8888846/124614036-da33cb00-de41-11eb-9805-670192d32862.png)

Suggestion
Change the height to min-height. However this may have effect on other properties.

h-8 {
  min-height: 2rem;
}

[pepelele]

I think it will depend on different cases... In general, there are 2 ways to solve it.

1. Show all long text.

Add min-w-max class to Menu.Items element.

<Menu.Items
  className={cx(
    "absolute left-0 z-dropdown w-56 min-w-max mt-2 origin-top-left rounded-md shadow-sm outline-none",
    "bg-white border border-gray-200",
    "dark:bg-neutral-800 dark:border-gray-700"
  )}
>

2. Truncate the string

add truncate class to span element.

<Icon
  as={ArrowsExpandIcon}
  label="arrows-expand"
  className={cx("w-4 h-4 mr-2", active ? "" : "text-neutral-500")}
/>
<span className="flex-1 mr-2 truncate">Really really long menu text will overflow.</span>
<Kbd>⌘F</Kbd>

To make sure it works with the default I think I will choose option 1 to show example.