Data Grid content is not being responsive with Textarea/CodeEditor inside a Cell

[jrodriguezcalvo]

Description

When DataGrid is in a Disclosure element and its width is fixed and with overflow set to auto, the elements as TextArea or CodeEditor are taking more width than it is corresponding. Please check this sandbox and play with the window width. Thank you in advanced

Link to Reproduction

https://codesandbox.io/p/sandbox/paste-starter-kit-forked-d2r3yj?file=%2Fsrc%2Findex.tsx%3A91%2C13

Steps to reproduce

1. Go to sandbox
2. Do screen smaller and check the width of codeEditor (in this case) but also applicable to textarea component.
3. See has it doesn't fit inside the container

Paste Core Version

latest

Browser

All

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[dosubot]

I found 1 discussion that might be helpful:

• Editable code block inside a Data grid Cell - This thread discusses issues related to editable components within a DataGrid, which may provide insights into your problem with the TextArea and CodeEditor responsiveness.

[nkrantz]

Hi @jrodriguezcalvo - thanks for pointing this out. We're taking a look and will reply with some more info by the end of the week.

[nkrantz]

Hi @jrodriguezcalvo - is the issue that you're bringing up the fact that the Data Grid is overflowing the Disclosure container, or that the Code Editor is overflowing the Data Grid Cell? The first is caused by the Disclosure Content not having overflowX="scroll" set, that's an addition we can talk about making. The second problem seems to be fixed by adding a third Data Grid Cell for the third column. Let me know what solution you're looking for and I'm happy to take another look.