diff --git a/app/web/src/nova/ed/logic/active/activate-meta.tsx b/app/web/src/nova/ed/logic/active/activate-meta.tsx
index 08a3085d..c7aedf71 100644
--- a/app/web/src/nova/ed/logic/active/activate-meta.tsx
+++ b/app/web/src/nova/ed/logic/active/activate-meta.tsx
@@ -1,40 +1,17 @@
+import { scrollTreeActiveItem } from "../../panel/tree/scroll-tree";
 import { IMeta, PG, active } from "../ed-global";
+import { getMetaById } from "./get-meta";
 
 export const activateMeta = (p: PG, _meta: IMeta) => {
+  scrollTreeActiveItem();
+  
   let meta = _meta;
   let parent_comp_id = meta.parent?.comp_id;
 
   if (!active.comp_id && meta.parent?.comp_id) {
-    let parent = meta.parent;
-
-    let is_jsx = false;
-    let i = 0;
-    while (parent) {
-      const meta_parent = p.page.meta[parent.id];
-
-      if (meta_parent && meta_parent.parent) {
-        if (meta_parent.item.component?.id === meta.parent?.comp_id) {
-          is_jsx = true;
-          break;
-        }
-
-        parent = meta_parent.parent;
-      } else {
-        break;
-      }
-      if (i > 10000) {
-        console.warn("warning cyclic item tree possibility detected.");
-        break;
-      }
-      i++;
-    }
-
-    if (is_jsx) {
-      if (meta.parent.instance_id) {
-        meta = p.page.meta[meta.parent.instance_id];
-      } else {
-        return;
-      }
+    if (!Object.keys(meta).includes("jsx_prop") && meta.parent.instance_id) {
+      const comp = getMetaById(p, meta.parent.instance_id);
+      if (comp) meta = comp;
     }
   }
 
diff --git a/app/web/src/nova/ed/panel/file/file-tree.tsx b/app/web/src/nova/ed/panel/file/file-tree.tsx
index ca53e690..79ef0334 100644
--- a/app/web/src/nova/ed/panel/file/file-tree.tsx
+++ b/app/web/src/nova/ed/panel/file/file-tree.tsx
@@ -101,7 +101,8 @@ const TreeItem: FC<{
         css`
           padding-left: ${depth * 10 + 10}px;
         `,
-        f.path === path && "border-r-2 bg-blue-100 border-r-blue-700"
+        f.path === path &&
+          "border-r-2 bg-blue-100 border-r-blue-700"
       )}
       onClick={() => {
         f.selected.clear();
diff --git a/app/web/src/nova/ed/panel/tree/node/item/indent-hook.ts b/app/web/src/nova/ed/panel/tree/node/item/indent-hook.ts
index ed8faee2..4284aa9b 100644
--- a/app/web/src/nova/ed/panel/tree/node/item/indent-hook.ts
+++ b/app/web/src/nova/ed/panel/tree/node/item/indent-hook.ts
@@ -3,6 +3,7 @@ import { useEffect } from "react";
 import { IContent } from "../../../../../../utils/types/general";
 import { getMetaById } from "../../../../logic/active/get-meta";
 import { IMeta, PG, active } from "../../../../logic/ed-global";
+import { scrollTreeActiveItem } from "../../scroll-tree";
 
 export const expandTreeHook = (
   p: PG,
@@ -83,5 +84,6 @@ export const expandTreeHook = (
         }
       }
     }
+    scrollTreeActiveItem();
   }, [p.page.tree, active.comp_id, active.item_id, p.ui.tree.open_all]);
 };
diff --git a/app/web/src/nova/ed/panel/tree/scroll-tree.ts b/app/web/src/nova/ed/panel/tree/scroll-tree.ts
new file mode 100644
index 00000000..de081284
--- /dev/null
+++ b/app/web/src/nova/ed/panel/tree/scroll-tree.ts
@@ -0,0 +1,17 @@
+import { active } from "../../logic/ed-global";
+
+export const scrollTreeActiveItem = () => {
+  setTimeout(() => {
+    let i = 0;
+    const ival = setInterval(() => {
+      const div = document.querySelector(
+        `.tree-${active.item_id}`
+      ) as HTMLDivElement;
+      if (div) {
+        div.scrollIntoView();
+      }
+      if (i > 7) clearInterval(ival);
+      i++;
+    }, 30);
+  }, 100);
+};