Components overlapping when horizontally resized

[prakhargupta1]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

https://user-images.githubusercontent.com/92228082/185468526-d88441c6-4315-430a-b295-98078f3be059.mov

Not sure if this is the expected behavior as of now. But sometimes the component is pushing the adjacent one, sometimes it is not.

[apedroferreira]

thanks for finding this Prakhar! ~~are you able to send me the DOM object from the app where you have this issue? that might help me reproduce it and understand it better~~ nevermind, not needed

[apedroferreira]

oh wait, i think the only issue here is that the resizing is not aware that the text input has a minimum width, so it does not respect it. this might be a tough issue to fix, but i'll see how we can improve this

[Janpot]

We can make it always fullWidth and remove that property? How would we size a texfield that is the only component on a row?

[prakhargupta1]

@apedroferreira In case it helps, here is the link to the app: https://master--toolpad.mui.com/_toolpad/app/cl1on1bd80041a1pdrrfdt0rq/editor/pages/cl6ysktjz00023b6g8xkizxr8

[apedroferreira]

How would we size a texfield that is the only component on a row?

with some improvements to resizing we could make it possible to adjust the left/right margin in the container to any value (even the top/bottom margins probably), as well as resize the text input horizontally to any possible size. right now it's very basic though so users can't do it yet...

We can make it always fullWidth and remove that property?

as things are for now if we had this type of component always be full width i guess we wouldn't be able to add any margins? and i guess any imposed minimum width in any component would still create visual issues like these?