DataLinks: Minor tweaks to links suggestions (#34423)

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

@@ -55,6 +55,9 @@ const getStyles = (theme: GrafanaTheme2) => ({
       color: ${theme.colors.primary.text};
     }
   `,
+  suggestionsWrapper: css`
+    box-shadow: ${theme.shadows.z2};
+  `,
   // Wrapper with child selector needed.
   // When classnames are applied to the same element as the wrapper, it causes the suggestions to stop working
   wrapperOverrides: css`
@@ -155,7 +158,7 @@ export const DataLinkInput: React.FC<DataLinkInputProps> = memo(
               <Portal>
                 <ReactPopper
                   referenceElement={selectionRef}
-                  placement="top-end"
+                  placement="bottom-end"
                   modifiers={[
                     {
                       name: 'preventOverflow',
@@ -178,7 +181,7 @@ export const DataLinkInput: React.FC<DataLinkInputProps> = memo(
                 >
                   {({ ref, style, placement }) => {
                     return (
-                      <div ref={ref} style={style} data-placement={placement}>
+                      <div ref={ref} style={style} data-placement={placement} className={styles.suggestionsWrapper}>
                         <CustomScrollbar scrollTop={activeIndexPosition} autoHeightMax="300px">
                           <DataLinkSuggestions
                             activeRef={activeRef}

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

@@ -25,7 +25,6 @@ const getStyles = (theme: GrafanaTheme2) => {
     wrapper: css`
       background: ${theme.colors.background.primary};
       width: 250px;
-      box-shadow: 0 5px 10px 0 ${theme.shadows.z1};
     `,
     item: css`
       background: none;

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

@@ -89,6 +89,7 @@ export const DataLinksInlineEditor: React.FC<DataLinksInlineEditorProps> = ({
         <Modal
           title="Edit link"
           isOpen={true}
+          closeOnBackdropClick={false}
           onDismiss={() => {
             onDataLinkCancel(editIndex);
           }}