From b8b489c93c56584ffaf0b2ce1fc6ee737b80bb40 Mon Sep 17 00:00:00 2001
From: Bogdan Chadkin <opensource@trysound.io>
Date: Mon, 25 Nov 2024 12:13:32 +0700
Subject: [PATCH] fix: show flex child for collection item (#4467)

Fixes https://github.com/webstudio-is/webstudio/issues/4458

Collection is not stylable and was checked for display: flex but instead
should be skipped.
---
 .../features/style-panel/shared/model.tsx     | 30 +++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/apps/builder/app/builder/features/style-panel/shared/model.tsx b/apps/builder/app/builder/features/style-panel/shared/model.tsx
index 77a75e1f3a..1a4d944755 100644
--- a/apps/builder/app/builder/features/style-panel/shared/model.tsx
+++ b/apps/builder/app/builder/features/style-panel/shared/model.tsx
@@ -318,15 +318,41 @@ export const useComputedStyleDecl = (property: StyleProperty) => {
   return useStore($store);
 };
 
+const $closestStylableInstanceSelector = computed(
+  [$instanceAndRootSelector, $instances, $registeredComponentMetas],
+  (instanceSelector, instances, metas) => {
+    // ignore unstylable instances which do not affect parent/child relationships
+    if (instanceSelector === undefined) {
+      return;
+    }
+    const closestStylableIndex = instanceSelector.findIndex(
+      (instanceId, index) => {
+        // start with parent
+        if (index === 0) {
+          return false;
+        }
+        const component = instances.get(instanceId)?.component;
+        if (component) {
+          return metas.get(component)?.stylable ?? true;
+        }
+        // ids without instances are collection items
+        // they are not stylable
+        return false;
+      }
+    );
+    return instanceSelector.slice(closestStylableIndex);
+  }
+);
+
 export const useParentComputedStyleDecl = (property: StyleProperty) => {
   const $store = useMemo(
     () =>
       computed(
-        [$model, $instanceAndRootSelector],
+        [$model, $closestStylableInstanceSelector],
         (model, instanceSelector) => {
           return getComputedStyleDecl({
             model,
-            instanceSelector: instanceSelector?.slice(1),
+            instanceSelector,
             property,
           });
         }