The purpose of an embedded canvas app is to have a low code/no code solution to custom UI components in model-driven forms instead of building something completely custom with HTML or PCF. To have a seamless experience for end-users, the embedded canvas apps should be styled the same as model-driven forms and be transparent that there another app within the model-driven form. The embedded canvas app is designed to be responsive irrespective of the device. Hence when viewed on larger screens, all the controls fit in the screen and the scrollbar is not required and when viewed on smaller screens such as laptops, scrollbar must appear only to show the controls that are not visible in the screen.
Problem and Feature Request
Presently on larger screens, an unwanted vertical scrollbar appears introducing a large chunk of white space within the canvas app which creates a confusion for the user having to scroll and check if there are more controls on the form and defeats the purpose of having a responsive embedded canvas app. The embedded canvas app and/or model-driven form should remove and adjust the height to the embedded app and scale accordingly. Example:
Also if we have some model-driven form fields/columns/attributes below the canvas app, then this would give an horrible user experience since the user will have to scroll through all the white space to reach the field:
The amount white space added is huge and cannot be ignored since it spoils the UI. Similar is the case in smaller screens as well. If the users needs:
to scroll to view the whole content embedded app when there's space on the model-driven form
or app has redundant scroll bars
and/or needs to scroll below the embedded app to enter the data
then it defeats the purpose of embedded canvas apps and would better to revert to a custom HTML or PCF control.