Scopes: Fix long texts for suggested dashboards (#92641)

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),
+    }),
   };
 };

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),