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"
>
- {dashboard.dashboardTitle}
+ {dashboard.dashboardTitle}
);
}
@@ -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);
}}
>
-
+
{folder.title}
@@ -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),