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

This commit is contained in:
Bogdan Matei 2024-08-29 12:20:56 +03:00 committed by GitHub
parent cec447cf7a
commit 1e1b554ff3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 14 additions and 4 deletions

View File

@ -24,7 +24,7 @@ export function ScopesDashboardsTreeDashboardItem({ dashboard }: ScopesDashboard
data-testid={`scopes-dashboards-${dashboard.dashboard}`} data-testid={`scopes-dashboards-${dashboard.dashboard}`}
role="treeitem" role="treeitem"
> >
<Icon name="apps" /> {dashboard.dashboardTitle} <Icon name="apps" className={styles.icon} /> {dashboard.dashboardTitle}
</Link> </Link>
); );
} }
@ -33,13 +33,18 @@ const getStyles = (theme: GrafanaTheme2) => {
return { return {
container: css({ container: css({
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'flex-start',
gap: theme.spacing(1), gap: theme.spacing(1),
padding: theme.spacing(0.5, 0), padding: theme.spacing(0.5, 0),
textAlign: 'left',
wordBreak: 'break-word',
'&:last-child': css({ '&:last-child': css({
paddingBottom: 0, paddingBottom: 0,
}), }),
}), }),
icon: css({
marginTop: theme.spacing(0.25),
}),
}; };
}; };

View File

@ -34,7 +34,7 @@ export function ScopesDashboardsTreeFolderItem({
onFolderUpdate(folderPath, !folder.isExpanded); 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} {folder.title}
</button> </button>
@ -56,13 +56,18 @@ const getStyles = (theme: GrafanaTheme2) => {
padding: theme.spacing(0.5, 0), padding: theme.spacing(0.5, 0),
}), }),
expand: css({ expand: css({
alignItems: 'center', alignItems: 'flex-start',
background: 'none', background: 'none',
border: 0, border: 0,
display: 'flex', display: 'flex',
gap: theme.spacing(1), gap: theme.spacing(1),
margin: 0, margin: 0,
padding: 0, padding: 0,
textAlign: 'left',
wordBreak: 'break-word',
}),
icon: css({
marginTop: theme.spacing(0.25),
}), }),
children: css({ children: css({
paddingLeft: theme.spacing(4), paddingLeft: theme.spacing(4),