bento-design-system icon indicating copy to clipboard operation
bento-design-system copied to clipboard

Bug: Column is not working with RSC

Open veej opened this issue 11 months ago • 0 comments

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 Columns 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: image

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

veej avatar Mar 15 '24 09:03 veej