feat: css handle in LayoutContainer to prevent CLS issues

Author: iago1501

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+- Class to `<div>` elements in `LayoutContainer` to manipulate those sections
+
 ## [8.135.0] - 2024-12-09
 
 ## [8.134.11] - 2024-09-30

react/components/LayoutContainer.tsx

@@ -43,8 +43,14 @@ const Container: FunctionComponent<ContainerProps> = ({
     if (elements === '__children__') {
       return <>{children}</>
     }
+
+    const elementIdRegex = /#(.*)/
+    const elementId = elements.match(elementIdRegex)
+    const containerClass = !elements.includes('fold')
+      ? `vtex-render__container-id-${elementId ? elementId[1] : elements}`
+      : ''
     return (
-      <div className={isRow ? '' : className}>
+      <div className={isRow ? containerClass : className}>
         <ExtensionPoint id={elements} {...props} />
       </div>
     )