The default List item component height is bound to the
$listItemMinHeight theme variable, which resolves to 64 pixels.
Semantiaclly, it’d make sense the theme variable was bound to the actual
minHeight property, but I guess my thinking was that it’s better to keep the list items at a fixed height by default. However, you’ve correctly rebound it to
The steps I did were:
- Add unmodified List item from core library
- In isolation mode, change the root container to have Vertical direction
- Give the labels super long text values.
This replicates the bug – the texts overlap as you show on web.
Inspecting via web inspector, it looks like the
flex-basis of the first row cell gets set incorrectly to
0px, along with incorrect
flex-grow value. Looking at these values in the Style tab for Cell #1, it seems they are correctly set. However, changing the Flex basis value to
auto, saving and removing it and saving again seemed to fix the issue.
This seems to stem from the default values that are set for the Row component – the defaults seem to work fine for the horizontally-laid-out Row, but when you convert it to a custom component, the cells start to be treated as regular Containers.
I’ll dig deeper and see what the proper fix would be, but the above steps fixed this particular case for me.