Separator in vertical mode doesn't work as height property isnt set to 100

[kotAPI]

We need to add height:"100%" property into css for default theme

There is also a gotcha that needs to be added into docs when used in conjunction with flex

This will work

 <div className='flex'>
        <Text className="text-gray-1000">Nobody's Listening</Text>
         <Separator orientation="vertical" />
         <Text>Linkin Park</Text>
         <Separator orientation="vertical" />
         <Text>2003</Text>
</div>

This will not work

 <div className='flex'>
        <Text className="text-gray-1000">Nobody's Listening</Text>
         <Separator orientation="vertical" />
         <Text>Linkin Park</Text>
         <Separator orientation="vertical" />
         <Text>2003</Text>
</div>

For it to work, the parent container needs to have an explicit height when items-center is used

This will work

 <div className='flex' style={{height:"20px"}}>
        <Text className="text-gray-1000">Nobody's Listening</Text>
         <Separator orientation="vertical" />
         <Text>Linkin Park</Text>
         <Separator orientation="vertical" />
         <Text>2003</Text>
</div>

[kotAPI]

Reason for behaviour:

If adding align-items: center; to your flex container is causing the child div not to take up the full height, it may be due to the default behavior of align-items: center; in a flex container. This property aligns the items along the cross-axis (vertically in a column flex container) and can affect how the items are stretched.

To ensure that the child div takes up 100% of the height while still using align-items: center;, you can use the align-self property on the child element to override the alignment for that specific item.