feat: container fix

Author: Aqib Mirza

client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx

@@ -65,10 +65,7 @@ const getStyle = (style: TabContainerStyleType) => {
       border: 1px solid ${style.border};
       border-radius: ${style.radius};
       overflow: hidden;
-      margin: ${style.margin};	
       padding: ${style.padding};	
-      width: ${widthCalculator(style.margin)};	
-      height: ${heightCalculator(style.margin)};
 
       > .ant-tabs-content-holder > .ant-tabs-content > div > .react-grid-layout {
         background-color: ${style.background};
@@ -167,6 +164,7 @@ const TabbedContainer = (props: TabbedContainerProps) => {
   // log.debug("TabbedContainer. props: ", props);
 
   return (
+    <div style={{padding: props.style.margin}}>
     <StyledTabs
       activeKey={activeKey}
       $style={style}
@@ -214,6 +212,7 @@ const TabbedContainer = (props: TabbedContainerProps) => {
         );
       })}
     </StyledTabs>
+    </div>
   );
 };
 

client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx

@@ -13,10 +13,10 @@ const getStyle = (style: ContainerStyleType) => {
     border-color: ${style.border};
     border-radius: ${style.radius};
     overflow: hidden;
-    margin: ${style.margin};	
+    // margin: ${style.margin};	
     padding: ${style.padding};	
-    width: ${widthCalculator(style.margin)};	
-    height: ${heightCalculator(style.margin)};
+    // width: ${widthCalculator(style.margin)};	
+    // height: ${heightCalculator(style.margin)};
   `;
 };
 
@@ -78,6 +78,7 @@ export function TriContainer(props: TriContainerProps) {
   const paddingWidth = isMobile ? 7 : 19;
 
   return (
+    <div style={{padding: style.margin}}>
     <Wrapper $style={style}>
       {showHeader && (
         <BackgroundColorContext.Provider value={container.style.headerBackground}>
@@ -128,5 +129,6 @@ export function TriContainer(props: TriContainerProps) {
         </BackgroundColorContext.Provider>
       )}
     </Wrapper>
+    </div>
   );
 }