Fix module comps shaking issue

Author: raheeliftikhar5

client/packages/lowcoder-design/src/components/ScrollBar.tsx

@@ -59,7 +59,6 @@ interface IProps {
 }
 
 export const ScrollBar = ({
-  height = "100%",
   className,
   children,
   style,
@@ -68,6 +67,7 @@ export const ScrollBar = ({
   $hideplaceholder = false,
   ...otherProps
 }: IProps) => {
+  const height = style?.height ?? '100%';
   // You can now use the style prop directly or pass it to SimpleBar
   const combinedStyle = { ...style, height }; // Example of combining height with passed style
 

client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx

@@ -114,21 +114,17 @@ export function CanvasView(props: ContainerBaseProps) {
         className={CNRootContainer}
         $bgColor={bgColor}
       >
-        <div>
-          <ScrollBar style={{ height: "100%", margin: "0px", padding: "0px" }}>
-            <Profiler id="Panel" onRender={profilerCallback}>
-              <InnerGrid
-                containerPadding={rootContainerPadding}
-                overflow={rootContainerOverflow}
-                {...props}
-                positionParams={positionParams} // Added By Aqib Mirza
-                {...gridLayoutCanvasProps}
-                bgColor={bgColor}
-                radius="0px"
-              />
-            </Profiler>
-          </ScrollBar>
-        </div>
+        <Profiler id="Panel" onRender={profilerCallback}>
+          <InnerGrid
+            containerPadding={rootContainerPadding}
+            overflow={rootContainerOverflow}
+            {...props}
+            positionParams={positionParams} // Added By Aqib Mirza
+            {...gridLayoutCanvasProps}
+            bgColor={bgColor}
+            radius="0px"
+          />
+        </Profiler>
       </UICompContainer>
     );
   }

client/packages/lowcoder/src/comps/comps/moduleComp/moduleComp.tsx

@@ -123,7 +123,7 @@ class ModuleTmpComp extends ModuleCompBase {
         )}
         <Section name={sectionNames.layout}>
           {!this.autoScaleCompHeight() && this.children.autoHeight.getPropertyView()}
-          {this.children.scrollbars.propertyView({
+          {!this.autoScaleCompHeight() && this.children.scrollbars.propertyView({
             label: trans("prop.scrollbar"),
           })}
           {hiddenPropertyView(this.children)}
@@ -531,7 +531,7 @@ const ModuleCompWithView = withViewFn(ModuleTmpComp, (comp) => {
   if (comp.moduleRootComp && comp.isReady) {
     content = (
       <Wrapper className="module-wrapper">
-        <ScrollBar style={{ height: comp.autoHeight() ? "100%" : "auto", margin: "0px", padding: "0px" }} hideScrollbar={!scrollbars}>
+        <ScrollBar style={{ height: comp.autoHeight() ? "100%" : "100%", margin: "0px", padding: "0px" }} hideScrollbar={!scrollbars}>
           <ExternalEditorContext.Provider value={moduleExternalState}>
            {comp.moduleRootComp.getView()}
           </ExternalEditorContext.Provider>

client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleLayoutComp.tsx

@@ -67,9 +67,7 @@ function ModuleLayoutView(props: IProps) {
 
   if (readOnly) {
     return (
-      <ScrollBar style={{ height: "100%", margin: "0px", padding: "0px" }}>
-        <ModulePreviewWrapper className={CNRootContainer}>{props.containerView}</ModulePreviewWrapper>
-      </ScrollBar>
+      <ModulePreviewWrapper className={CNRootContainer}>{props.containerView}</ModulePreviewWrapper>
     );
   }
 
@@ -115,30 +113,26 @@ export class ModuleLayoutComp extends ModuleLayoutCompBase implements IContainer
     const isRowCountLocked = this.children.autoScaleCompHeight.getView();
     const rowCount = this.children.containerRowCount.getView();
     return (
-      <div>
-        <ScrollBar style={{ height: "100%", margin: "0px", padding: "0px" }} $hideplaceholder={false}>
-          <ModuleLayoutView
-            positionParams={this.children.positionParams.getView()}
-            containerSize={this.children.containerSize.getView()}
-            containerView={this.children.container.containerView({
-              rowCount,
-              isRowCountLocked,
-              onRowCountChange: (rowCount) => {
-                this.children.containerRowCount.dispatchChangeValueAction(rowCount);
-              },
-            })}
-            onPositionParamsChange={(params) => {
-              setTimeout(() => this.children.positionParams.dispatchChangeValueAction(params));
-            }}
-            onLayoutChange={(layout) => {
-              this.children.containerSize.dispatchChangeValueAction({
-                height: layout[moduleContainerId].h,
-                width: layout[moduleContainerId].w,
-              });
-            }}
-          />
-        </ScrollBar>
-      </div>
+      <ModuleLayoutView
+        positionParams={this.children.positionParams.getView()}
+        containerSize={this.children.containerSize.getView()}
+        containerView={this.children.container.containerView({
+          rowCount,
+          isRowCountLocked,
+          onRowCountChange: (rowCount) => {
+            this.children.containerRowCount.dispatchChangeValueAction(rowCount);
+          },
+        })}
+        onPositionParamsChange={(params) => {
+          setTimeout(() => this.children.positionParams.dispatchChangeValueAction(params));
+        }}
+        onLayoutChange={(layout) => {
+          this.children.containerSize.dispatchChangeValueAction({
+            height: layout[moduleContainerId].h,
+            width: layout[moduleContainerId].w,
+          });
+        }}
+      />
     );
   }
   getPropertyView() {

client/packages/lowcoder/src/comps/comps/rootComp.tsx

@@ -122,7 +122,7 @@ function RootView(props: RootViewProps) {
   }
 
   return (
-    <div {...divProps}>
+    <div {...divProps} style={{height: '100%'}}>
       <PropertySectionContext.Provider value={propertySectionContextValue}>
         <ThemeContext.Provider value={themeContextValue}>
           <EditorContext.Provider value={editorState}>