From c4731efb620944aefd2f27622f38d39b3b9af622 Mon Sep 17 00:00:00 2001
From: Krishna Dhakal <7krishna7dhakal7@gmail.com>
Date: Fri, 28 Jul 2023 18:53:41 +0545
Subject: [PATCH] Dashboard: Fixes setting long links overflow (#72428)

---
 .../LinksSettings/LinkSettingsList.tsx        | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/public/app/features/dashboard/components/LinksSettings/LinkSettingsList.tsx b/public/app/features/dashboard/components/LinksSettings/LinkSettingsList.tsx
index cd9388e84f4..39aa6a88f96 100644
--- a/public/app/features/dashboard/components/LinksSettings/LinkSettingsList.tsx
+++ b/public/app/features/dashboard/components/LinksSettings/LinkSettingsList.tsx
@@ -1,7 +1,8 @@
+import { css } from '@emotion/css';
 import React, { useState } from 'react';
 
 import { arrayUtils } from '@grafana/data';
-import { DeleteButton, HorizontalGroup, Icon, IconButton, TagList } from '@grafana/ui';
+import { DeleteButton, HorizontalGroup, Icon, IconButton, TagList, useStyles2 } from '@grafana/ui';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 
 import { DashboardModel, DashboardLink } from '../../state/DashboardModel';
@@ -14,6 +15,8 @@ type LinkSettingsListProps = {
 };
 
 export const LinkSettingsList = ({ dashboard, onNew, onEdit }: LinkSettingsListProps) => {
+  const styles = useStyles2(getStyles);
+
   const [links, setLinks] = useState(dashboard.links);
 
   const moveLink = (idx: number, direction: number) => {
@@ -69,8 +72,8 @@ export const LinkSettingsList = ({ dashboard, onNew, onEdit }: LinkSettingsListP
               </td>
               <td role="gridcell">
                 <HorizontalGroup>
-                  {link.title && <span>{link.title}</span>}
-                  {link.type === 'link' && <span>{link.url}</span>}
+                  {link.title && <span className={styles.titleWrapper}>{link.title}</span>}
+                  {link.type === 'link' && <span className={styles.urlWrapper}>{link.url}</span>}
                   {link.type === 'dashboards' && <TagList tags={link.tags ?? []} />}
                 </HorizontalGroup>
               </td>
@@ -100,3 +103,16 @@ export const LinkSettingsList = ({ dashboard, onNew, onEdit }: LinkSettingsListP
     </>
   );
 };
+
+const getStyles = () => ({
+  titleWrapper: css`
+    width: 20vw;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  `,
+  urlWrapper: css`
+    width: 40vw;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  `,
+});