diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Draggable/DraggableBodyRow.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Draggable/DraggableBodyRow.tsx index 21528c25df1..7f318f3d00f 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Draggable/DraggableBodyRow.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Draggable/DraggableBodyRow.tsx @@ -11,6 +11,7 @@ * limitations under the License. */ +import classNames from 'classnames'; import { isUndefined } from 'lodash'; import React, { useEffect, useRef } from 'react'; import { useDrag, useDrop } from 'react-dnd'; @@ -41,8 +42,7 @@ const DraggableBodyRow = ({ return { isOver: monitor.isOver(), - dropClassName: - dragIndex < (index ?? 0) ? 'drop-over-downward' : 'drop-over-upward', + dropClassName: dragIndex !== index ? 'drop-over-child' : '', }; }, hover: () => { @@ -56,7 +56,7 @@ const DraggableBodyRow = ({ // here we are passing the drag record const [{ isDragging }, drag] = useDrag({ type: DRAGGABLE_BODY_ROW, - item: { record }, + item: { record, index }, collect: (monitor) => ({ isDragging: monitor.isDragging(), }), @@ -71,7 +71,7 @@ const DraggableBodyRow = ({ return ( td { - background: @active-color; + .ant-table { + table { + border-collapse: collapse; + .ant-table-tbody { + border: 2px dashed @primary-color; + + td { + background: @active-color; + } + } } } }