[Bug]: The select widget overlaps on the video widget inside form

[YogeshJayaseelan]

Is there an existing issue for this?

• [X] I have searched the existing issues

Current Behavior

It is observed that the select widget overlaps on the video widget inside the form when the select widget is resized

Steps To Reproduce

1.Launch Appmsith app in release/Prod environment 2.Drag and drop form widget 3.Place video widget inside form widget 4.Place a select widget left to the video widget inside the form widget 5.Resize the select widget and observe

Environment

Production

Version

Cloud

[dilippitchika]

Happens for all widgets as size of the window changes, need not pick this up right now.

[riodeuno]

@dilippitchika We should always contain all widget components into the horizontal bounds of the widget. We can also do this for the vertical bounds until #11038 is implemented.

We can look at an approach which uses these two features in conjunction for a better experience.

4630 and #11038

cc @somangshu

[dilippitchika]

@riodeuno this issue happens when you are resizing a container, i believe the container is not aware of the min size a widget could go to and prevent users from resizing further. I am unsure about how this will affect dynamic height.

[riodeuno]

When a container resizes, the new computed sizes are also applied to the resized children. So, ideally, all widgets should be aware of their dimensions. At the very least, after the user is done resizing the container.

With a combination of responsiveness in widgets, and dynamic height, we can try to make sure that widgets respond well to size changes. When we have responsiveness in the wild, components tend to stack when they're placed beside each other horizontally, which means we need to dynamically increase the height of the widget, when the widget contents respond to the new sizes.