fix(datalinks): drag-n-drop blocks jumping

packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx

@@ -112,7 +112,6 @@ export const DataLinksInlineEditor = ({
                 const key = `${link.title}/${idx}`;
 
                 const linkJSX = (
-                  <div className={styles.itemWrapper} key={key}>
                   <DataLinksListItem
                     key={key}
                     index={idx}
@@ -123,7 +122,6 @@ export const DataLinksInlineEditor = ({
                     data={data}
                     itemKey={key}
                   />
-                  </div>
                 );
 
                 if (idx === 0) {
@@ -184,9 +182,6 @@ const getDataLinksInlineEditorStyles = (theme: GrafanaTheme2) => ({
     marginBottom: -10,
     display: 'inline-block',
   }),
-  itemWrapper: css({
-    padding: '4px 8px 8px 8px',
-  }),
   button: css({
     marginLeft: theme.spacing(1),
   }),

packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItem.tsx

@@ -32,7 +32,6 @@ export const DataLinksListItem = ({ link, onEdit, onRemove, index, itemKey }: Da
   return (
     <Draggable key={itemKey} draggableId={itemKey} index={index}>
       {(provided) => (
-        <>
         <div
           className={cx(styles.wrapper, styles.dragRow)}
           ref={provided.innerRef}
@@ -63,7 +62,6 @@ export const DataLinksListItem = ({ link, onEdit, onRemove, index, itemKey }: Da
             </div>
           </div>
         </div>
-        </>
       )}
     </Draggable>
   );
@@ -109,6 +107,7 @@ const getDataLinkListItemStyles = (theme: GrafanaTheme2) => {
     }),
     dragRow: css({
       position: 'relative',
+      margin: '4px 8px 8px 8px',
     }),
     icons: css({
       display: 'flex',