From 93fc476f8ff3428c993cce0a30097e713b185637 Mon Sep 17 00:00:00 2001
From: Ivan Starkov <istarkov@gmail.com>
Date: Sun, 1 Dec 2024 22:56:06 +0700
Subject: [PATCH] fix: Collapsed state was incorrectly calculated in some
 cases.  (#4492)

## Description

ref #3994

2 bugs:

1. Wrong calculation of
```
Box
  Box display=contents
     Box
```

Example before this PR


https://p-882ed593-40cc-4382-b119-15c588d0ce6f-dot-main.development.webstudio.is/

<img width="1311" alt="image"
src="https://github.com/user-attachments/assets/0a036ed2-e054-41e6-9771-f8a655d1be7f">


Example After this PR

https://p-882ed593-40cc-4382-b119-15c588d0ce6f-dot-fix-collapse.development.webstudio.is/

<img width="1310" alt="image"
src="https://github.com/user-attachments/assets/368e12a3-0b9c-480a-ba43-b37b9a160469">

2. It was possible that Content Block was like
```
Box contents
  Box contents
```
what caused inability to find it position, outline and collapse
attributes

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
---
 apps/builder/app/canvas/collapsed.ts          | 41 +++++++++++++++----
 .../features/build-mode/block-template.tsx    | 10 ++++-
 2 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/apps/builder/app/canvas/collapsed.ts b/apps/builder/app/canvas/collapsed.ts
index a1c452e422d2..6ba29827ac36 100644
--- a/apps/builder/app/canvas/collapsed.ts
+++ b/apps/builder/app/canvas/collapsed.ts
@@ -120,6 +120,28 @@ const getInstanceSize = (instanceId: string, tagName: HtmlTags | undefined) => {
 
 const MAX_SIZE_TO_USE_OPTIMIZATION = 50;
 
+const findFirstNonContentsParent = (element: Element) => {
+  // Start with the element's parent
+  let parent = element.parentElement;
+
+  // Continue traversing up until we find a non-contents parent or reach the top
+  while (parent) {
+    // Get the computed style of the parent
+    const computedStyle = window.getComputedStyle(parent);
+
+    // Check if the display is not 'contents'
+    if (computedStyle.display !== "contents") {
+      return parent;
+    }
+
+    // Move up to the next parent
+    parent = parent.parentElement;
+  }
+
+  // Return null if no non-contents parent is found
+  return null;
+};
+
 const recalculate = () => {
   const rootInstanceId = $selectedPage.get()?.rootInstanceId;
 
@@ -180,20 +202,23 @@ const recalculate = () => {
       elementsToRecalculate.push(element);
     }
 
-    const elementPosition = window.getComputedStyle(element).position;
+    const elementStyle = window.getComputedStyle(element);
+    // const elementPosition = window.getComputedStyle(element).position;
+
+    const parentElement = findFirstNonContentsParent(element);
 
-    if (element.parentElement) {
+    if (parentElement) {
       if (
-        elementPosition === "absolute" ||
-        elementPosition === "fixed" ||
-        element.offsetParent == null
+        elementStyle.position === "absolute" ||
+        elementStyle.position === "fixed" ||
+        element.offsetParent == null // collapsed or none
       ) {
         parentsWithAbsoluteChildren.set(
-          element.parentElement,
-          parentsWithAbsoluteChildren.get(element.parentElement) ?? 0
+          parentElement,
+          parentsWithAbsoluteChildren.get(parentElement) ?? 0
         );
       } else {
-        parentsWithAbsoluteChildren.set(element.parentElement, 1);
+        parentsWithAbsoluteChildren.set(parentElement, 1);
       }
     }
   }
diff --git a/apps/builder/app/canvas/features/build-mode/block-template.tsx b/apps/builder/app/canvas/features/build-mode/block-template.tsx
index 24c4d496d6af..ea14245aafc6 100644
--- a/apps/builder/app/canvas/features/build-mode/block-template.tsx
+++ b/apps/builder/app/canvas/features/build-mode/block-template.tsx
@@ -34,5 +34,13 @@ export const BlockTemplate = React.forwardRef<
     return;
   }
 
-  return <div style={{ display: "contents" }} ref={ref} {...props} />;
+  const childrenCount = React.Children.count(props.children);
+
+  return (
+    <div
+      style={{ display: childrenCount === 0 ? "block" : "contents" }}
+      ref={ref}
+      {...props}
+    />
+  );
 }) as AnyComponent;