From 1e1b554ff3114cc0e17ef5597ce988460315b42f Mon Sep 17 00:00:00 2001
From: Bogdan Matei <bogdan.matei@grafana.com>
Date: Thu, 29 Aug 2024 12:20:56 +0300
Subject: [PATCH] Scopes: Fix long texts for suggested dashboards (#92641)

---
 .../internal/ScopesDashboardsTreeDashboardItem.tsx       | 9 +++++++--
 .../scopes/internal/ScopesDashboardsTreeFolderItem.tsx   | 9 +++++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/public/app/features/scopes/internal/ScopesDashboardsTreeDashboardItem.tsx b/public/app/features/scopes/internal/ScopesDashboardsTreeDashboardItem.tsx
index 94fe444561a..ce84b86c0cb 100644
--- a/public/app/features/scopes/internal/ScopesDashboardsTreeDashboardItem.tsx
+++ b/public/app/features/scopes/internal/ScopesDashboardsTreeDashboardItem.tsx
@@ -24,7 +24,7 @@ export function ScopesDashboardsTreeDashboardItem({ dashboard }: ScopesDashboard
       data-testid={`scopes-dashboards-${dashboard.dashboard}`}
       role="treeitem"
     >
-      <Icon name="apps" /> {dashboard.dashboardTitle}
+      <Icon name="apps" className={styles.icon} /> {dashboard.dashboardTitle}
     </Link>
   );
 }
@@ -33,13 +33,18 @@ const getStyles = (theme: GrafanaTheme2) => {
   return {
     container: css({
       display: 'flex',
-      alignItems: 'center',
+      alignItems: 'flex-start',
       gap: theme.spacing(1),
       padding: theme.spacing(0.5, 0),
+      textAlign: 'left',
+      wordBreak: 'break-word',
 
       '&:last-child': css({
         paddingBottom: 0,
       }),
     }),
+    icon: css({
+      marginTop: theme.spacing(0.25),
+    }),
   };
 };
diff --git a/public/app/features/scopes/internal/ScopesDashboardsTreeFolderItem.tsx b/public/app/features/scopes/internal/ScopesDashboardsTreeFolderItem.tsx
index e097fc7e266..8278cab8f82 100644
--- a/public/app/features/scopes/internal/ScopesDashboardsTreeFolderItem.tsx
+++ b/public/app/features/scopes/internal/ScopesDashboardsTreeFolderItem.tsx
@@ -34,7 +34,7 @@ export function ScopesDashboardsTreeFolderItem({
           onFolderUpdate(folderPath, !folder.isExpanded);
         }}
       >
-        <Icon name={!folder.isExpanded ? 'angle-right' : 'angle-down'} />
+        <Icon name={!folder.isExpanded ? 'angle-right' : 'angle-down'} className={styles.icon} />
 
         {folder.title}
       </button>
@@ -56,13 +56,18 @@ const getStyles = (theme: GrafanaTheme2) => {
       padding: theme.spacing(0.5, 0),
     }),
     expand: css({
-      alignItems: 'center',
+      alignItems: 'flex-start',
       background: 'none',
       border: 0,
       display: 'flex',
       gap: theme.spacing(1),
       margin: 0,
       padding: 0,
+      textAlign: 'left',
+      wordBreak: 'break-word',
+    }),
+    icon: css({
+      marginTop: theme.spacing(0.25),
     }),
     children: css({
       paddingLeft: theme.spacing(4),