feat: css handle in LayoutContainer to prevent CLS issues

vtex-apps · Dec 17, 2024 · 4299a4c · 4299a4c
2 parents a088041 + b61f20a
commit 4299a4c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/CHANGELOG.md b/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

diff --git a/react/components/LayoutContainer.tsx b/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>
     )