From 8b5b012e5c0bddbdf1e063f8b2198cc18d68575d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Tue, 6 Oct 2026 06:03:20 +0000
Subject: [PATCH] fix(studio): dragging a Layers row no longer highlights the
 row names (#5104)

---
 .../src/components/editor/LayersPanel.test.ts | 25 +++++++++++++++++++
 .../src/components/editor/LayersPanel.tsx     |  2 +-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/packages/studio/src/components/editor/LayersPanel.test.ts b/packages/studio/src/components/editor/LayersPanel.test.ts
index 033eb98aa4..e93e9c1e78 100644
--- a/packages/studio/src/components/editor/LayersPanel.test.ts
+++ b/packages/studio/src/components/editor/LayersPanel.test.ts
@@ -306,4 +306,29 @@ describe("LayersPanel preview promotion", () => {
     expect(collectedRootIds()).toEqual(["a"]);
     fetchSpy.mockRestore();
   });
+
+  it("a row press starts no text selection, so dragging a row leaves no letters highlighted", () => {
+    const doc = new Window().document;
+    doc.body.innerHTML = `<div data-composition-id="a"><div id="back"></div><div id="front"></div></div>`;
+    const iframe = document.createElement("iframe");
+    Object.defineProperty(iframe, "contentDocument", { value: doc });
+    const item = (id: string) =>
+      ({
+        key: id,
+        element: doc.getElementById(id),
+        label: id,
+        depth: 0,
+        childCount: 0,
+        id,
+      }) as unknown as DomEditLayerItem;
+    mocks.collect.mockReset().mockReturnValue([item("back"), item("front")]);
+    mocks.previewIframeRef.current = iframe;
+    usePreviewIframeStore.setState({ iframe });
+    act(() => root.render(createElement(LayersPanel)));
+    act(() => void iframe.dispatchEvent(new Event("load")));
+
+    const rows = [...host.querySelectorAll("[data-layer-index]")];
+    expect(rows).toHaveLength(2);
+    expect(rows.every((row) => row.closest(".select-none"))).toBe(true);
+  });
 });
diff --git a/packages/studio/src/components/editor/LayersPanel.tsx b/packages/studio/src/components/editor/LayersPanel.tsx
index 2199a8ab19..06ae66c3fe 100644
--- a/packages/studio/src/components/editor/LayersPanel.tsx
+++ b/packages/studio/src/components/editor/LayersPanel.tsx
@@ -433,7 +433,7 @@ export const LayersPanel = memo(function LayersPanel({ host }: { host?: LayersPa
       </div>
       <div
         ref={scrollContainerRef}
-        className="relative min-h-0 flex-1 overflow-y-auto py-1"
+        className="relative min-h-0 flex-1 select-none overflow-y-auto py-1"
         onPointerMove={handleContainerPointerMove}
         onPointerUp={handleContainerPointerUp}
         onPointerCancel={handleContainerPointerUp}