diff --git a/packages/react/src/container/Pane/index.tsx b/packages/react/src/container/Pane/index.tsx index dfb240d0..5425f91d 100644 --- a/packages/react/src/container/Pane/index.tsx +++ b/packages/react/src/container/Pane/index.tsx @@ -2,7 +2,7 @@ * The user selection rectangle gets displayed when a user drags the mouse while pressing shift */ -import { useRef, type MouseEvent as ReactMouseEvent, type ReactNode } from 'react'; +import { CSSProperties, useRef, type MouseEvent as ReactMouseEvent, type ReactNode } from 'react'; import { shallow } from 'zustand/shallow'; import cc from 'classcat'; import { getNodesInside, getEventPosition, SelectionMode } from '@xyflow/system'; @@ -13,6 +13,11 @@ import { useStore, useStoreApi } from '../../hooks/useStore'; import { getSelectionChanges } from '../../utils'; import type { ReactFlowProps, ReactFlowState, NodeChange, EdgeChange } from '../../types'; +export const paneStyle: CSSProperties = { + ...containerStyle, + position: 'fixed', +}; + type PaneProps = { isSelecting: boolean; children: ReactNode; @@ -227,7 +232,7 @@ export function Pane({ onMouseUp={hasActiveSelection ? onMouseUp : undefined} onMouseLeave={hasActiveSelection ? onMouseLeave : onPaneMouseLeave} ref={container} - style={containerStyle} + style={paneStyle} > {children}