From 4006eff86a4b167e90def30f8046ce77a0be865f Mon Sep 17 00:00:00 2001
From: hamed musallam <hamed.musallam@gmail.com>
Date: Mon, 1 Sep 2025 14:38:16 +0200
Subject: [PATCH] fix: use selector for ReactRnd bounds

close #3669
---
 .../components/FloatMoleculeStructures/DraggableStructure.tsx | 4 +++-
 src/component/1d/FloatPublicationString.tsx                   | 2 +-
 src/component/1d/FloatingRanges.tsx                           | 2 +-
 src/component/1d/inset/DraggableInset.tsx                     | 2 +-
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/component/1d-2d/components/FloatMoleculeStructures/DraggableStructure.tsx b/src/component/1d-2d/components/FloatMoleculeStructures/DraggableStructure.tsx
index 6b6453eae0..9a87c19560 100644
--- a/src/component/1d-2d/components/FloatMoleculeStructures/DraggableStructure.tsx
+++ b/src/component/1d-2d/components/FloatMoleculeStructures/DraggableStructure.tsx
@@ -49,6 +49,7 @@ const ReactRnd = styled(Rnd)`
 export function DraggableStructure(props: DraggableStructureProps) {
   const { molecule, moleculeView } = props;
   const { viewerRef } = useGlobal();
+
   const isExportProcessStart = useCheckExportStatus();
   const dispatch = useDispatch();
   const { modal, openMoleculeEditor } = useMoleculeEditor();
@@ -78,6 +79,7 @@ export function DraggableStructure(props: DraggableStructureProps) {
       bounding.width += width;
       bounding.height += height;
     }
+
     dispatch({
       type: 'CHANGE_FLOAT_MOLECULE_POSITION',
       payload: { id: molecule.id, bounding: bounding as MoleculeBoundingRect },
@@ -137,7 +139,7 @@ export function DraggableStructure(props: DraggableStructureProps) {
       minHeight={100}
       dragHandleClassName="handle"
       enableUserSelectHack={false}
-      bounds={viewerRef}
+      bounds={`#${viewerRef.id}`}
       style={{ zIndex: 1 }}
       className="draggable-molecule"
       onDragStart={() => setIsMoveActive(true)}
diff --git a/src/component/1d/FloatPublicationString.tsx b/src/component/1d/FloatPublicationString.tsx
index e3f5cff370..b5deb332a5 100644
--- a/src/component/1d/FloatPublicationString.tsx
+++ b/src/component/1d/FloatPublicationString.tsx
@@ -265,7 +265,7 @@ function DraggablePublicationString(props: DraggablePublicationStringProps) {
       minHeight={50}
       dragHandleClassName="handle"
       enableUserSelectHack={false}
-      bounds={viewerRef}
+      bounds={`#${viewerRef.id}`}
       style={{ zIndex: 1 }}
       onDragStart={() => setIsMoveActive(true)}
       onResize={(e, dir, eRef, size, position) =>
diff --git a/src/component/1d/FloatingRanges.tsx b/src/component/1d/FloatingRanges.tsx
index fa1475133f..0db070e0fa 100644
--- a/src/component/1d/FloatingRanges.tsx
+++ b/src/component/1d/FloatingRanges.tsx
@@ -303,7 +303,7 @@ function DraggableRanges(props: DraggablePublicationStringProps) {
       minHeight={50}
       dragHandleClassName="handle"
       enableUserSelectHack={false}
-      bounds={viewerRef}
+      bounds={`#${viewerRef.id}`}
       style={{ zIndex: 1 }}
       onDragStart={() => setIsMoveActive(true)}
       onResize={(e, dir, eRef, size, position) =>
diff --git a/src/component/1d/inset/DraggableInset.tsx b/src/component/1d/inset/DraggableInset.tsx
index b7351de220..0a0cb8dd3d 100644
--- a/src/component/1d/inset/DraggableInset.tsx
+++ b/src/component/1d/inset/DraggableInset.tsx
@@ -186,7 +186,7 @@ export function DraggableInset(props: Inset) {
       minHeight={100}
       dragHandleClassName="handle"
       enableUserSelectHack={false}
-      bounds={viewerRef}
+      bounds={`#${viewerRef.id}`}
       style={{ zIndex: 1 }}
       onDragStart={() => setIsMoveActive(true)}
       onResize={(e, dir, eRef, size, position) =>