Collapsing Grid has wrong height during animation

[finnharbeke]

What package has an issue

@mantine/core

Describe the bug

When the child of a Collapse is a grid, the css height prop that is set to the collapse components during animation, is not what the actual height of child should be.

In the sandbox you will see that the issue is a little different depending on if the component before the collapse is also a grid or not, but the issue only happens for a grid in the collapse.

What version of @mantine/hooks page do you have in package.json?

I'm using 5.10.2, but the sandbox with 6.0.4 behaves the same

If possible, please include a link to a codesandbox with the reproduced problem

https://codesandbox.io/s/mantine-collapse-grid-t12qcw?file=/src/App.tsx

Do you know how to fix the issue

None

Are you willing to participate in fixing this issue and create a pull request with the fix

None

Possible fix

I think this has something to do with the negative margin of the Grid Component. But in the Component.js file I don't see how that height is calculated or any other obvious fix, maybe it's a css thing? If yes, do you know how I could possibly set any style props to stop this from happening?

[7iomka]

My research for this type of issue: https://codepen.io/7iomka/pen/xxajRLe

Conclusion: negative margin from the bottom of an element affects scrollHeight that is used as a base for animation (I think in most libraries). For this reason some UI libraries uses for grid vertical spacing negation only marginTop

[petermanders89]

We are experiencing similar issues. It is probably due to the margin on the component. I copied the example from the docs and modified the 'Text' component to have margin.

https://codesandbox.io/s/react-mantine-collapse-issue-with-margin-66wxsr?file=/src/App.tsx

[rtivital]

The issue has been fixed in 7.0 – https://codesandbox.io/s/mantine-collapse-grid-forked-vh6drd?file=/src/App.tsx