From 4bdebf338cc764b60c062eda492808367c8f2846 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Fri, 9 Dec 2022 03:38:12 -0800
Subject: [PATCH] [v9.3.x] Panel Edit: Fix data links edit icons being off
 screen when provided title is too long (#60082)

* Panel Edit: Fix data links edit icons being off screen when provided title is too long (#59829)

* Fix data links edit icons being off screen

* Remove unused imports

* Review

(cherry picked from commit 6f930f48365fa06baca6cb095f216ef4a08a0c06)

* Fix backport
---
 .../DataLinksListItem.tsx                     | 38 ++++++++++++-------
 1 file changed, 24 insertions(+), 14 deletions(-)

diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItem.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItem.tsx
index 03fcfdd6623..17b7f843927 100644
--- a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItem.tsx
+++ b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItem.tsx
@@ -5,7 +5,6 @@ import { DataFrame, DataLink, GrafanaTheme2 } from '@grafana/data';
 
 import { stylesFactory, useTheme2 } from '../../../themes';
 import { IconButton } from '../../IconButton/IconButton';
-import { HorizontalGroup, VerticalGroup } from '../../Layout/Layout';
 
 export interface DataLinksListItemProps {
   index: number;
@@ -27,20 +26,18 @@ export const DataLinksListItem: FC<DataLinksListItemProps> = ({ link, onEdit, on
 
   return (
     <div className={styles.wrapper}>
-      <VerticalGroup spacing="xs">
-        <HorizontalGroup justify="space-between" align="flex-start" width="100%">
-          <div className={cx(styles.title, !hasTitle && styles.notConfigured)}>
-            {hasTitle ? title : 'Data link title not provided'}
-          </div>
-          <HorizontalGroup>
-            <IconButton name="pen" onClick={onEdit} />
-            <IconButton name="times" onClick={onRemove} />
-          </HorizontalGroup>
-        </HorizontalGroup>
-        <div className={cx(styles.url, !hasUrl && styles.notConfigured)} title={url}>
-          {hasUrl ? url : 'Data link url not provided'}
+      <div className={styles.titleWrapper}>
+        <div className={cx(styles.url, !hasUrl && styles.notConfigured)}>
+          {hasTitle ? title : 'Data link title not provided'}
         </div>
-      </VerticalGroup>
+        <div className={styles.actionButtons}>
+          <IconButton name="pen" onClick={onEdit} />
+          <IconButton name="times" onClick={onRemove} />
+        </div>
+      </div>
+      <div className={cx(styles.url, !hasUrl && styles.notConfigured)} title={url}>
+        {hasUrl ? url : 'Data link url not provided'}
+      </div>
     </div>
   );
 };
@@ -53,6 +50,19 @@ const getDataLinkListItemStyles = stylesFactory((theme: GrafanaTheme2) => {
       &:last-child {
         margin-bottom: 0;
       }
+      display: flex;
+      flex-direction: column;
+    `,
+    titleWrapper: css`
+      label: data-links-list-item-title;
+      justify-content: space-between;
+      display: flex;
+      width: 100%;
+      align-items: center;
+    `,
+    actionButtons: css`
+      margin-left: ${theme.spacing(1)};
+      display: flex;
     `,
     notConfigured: css`
       font-style: italic;