Elements of the Display Data Card overlaps in 16:9 aspect ratio

[henriquebarrosr]

Describe the bug

When we enable the Aspect ratio option and change the Aspect ratio value to 16:9 on the DataCard display, the elements overlap.

What libraries are you seeing the problem on?

Mobile Library, Desktop Library

Steps to reproduce

1. Add the Display Data Card component to a file in Figma
2. Enable the Aspect ratio property
3. Choose the 16:9 option
4. See the result

Expected behavior

The elements should not overlap.

[aweell]

Hi @henriquebarrosr,

This is due to how Figma handles auto gap option (needed in order to place buttons always at the bottom if height makes the gap with content bigger than default gap, in development, when the contents of the card are higher than the allowed height by the aspect ratio settings the card ignores the aspect ratio.

Here we cannot do that, if the elements take more than the height defined by the width to maintain the aspect ratio, they'll overlap.

I tried using min-height and also new Figma's aspect-ratio feature, but the results are the same, if you have a proposal about how to solve this issue, we're more than open!