bento-design-system
bento-design-system copied to clipboard
Bug: Column is not working with RSC
Description of the bug
Trying to bootstrap a new Next.js application with App Router, and using Columns
in a server component (e.g. a layout), it seems the width
set on explicit Column
components is ignored. E.g.
<Columns space={0}>
<Column width="1/3">
....
</Column>
<Column width="2/3">
...
</Column>
</Columns>
The code above will result in two Column
s splitting the available space in half, instead of respecting the 1/3 - 2/3 proportion.
Inspecting the generated HTML code, it seems the Column
component with the right flex-basis is wrapped in another Column
, as if bento is not able to recognize the child is a Column
:
It seems, for reasons, the isColumn
function to detect if a child of Columns
is a Column
doesn't work as expected with RSC.
Playroom reproduction
No response
Version
0.22.9
What browsers are you seeing the problem on?
Chrome