diff --git a/public/app/features/browse-dashboards/components/RecentlyViewedDashboards.tsx b/public/app/features/browse-dashboards/components/RecentlyViewedDashboards.tsx index f0c2d4d3a13..b11e7c35f85 100644 --- a/public/app/features/browse-dashboards/components/RecentlyViewedDashboards.tsx +++ b/public/app/features/browse-dashboards/components/RecentlyViewedDashboards.tsx @@ -123,6 +123,7 @@ const getStyles = (theme: GrafanaTheme2) => { color: 'transparent', cursor: 'pointer', }, + padding: 0, }), content: css({ paddingTop: theme.spacing(0), diff --git a/public/app/plugins/panel/dashlist/DashListItem.tsx b/public/app/plugins/panel/dashlist/DashListItem.tsx index 6d12eec30e9..cbb093c51f4 100644 --- a/public/app/plugins/panel/dashlist/DashListItem.tsx +++ b/public/app/plugins/panel/dashlist/DashListItem.tsx @@ -1,3 +1,5 @@ +import { truncate } from 'lodash'; + import { reportInteraction } from '@grafana/runtime'; import { Box, Card, Icon, Link, Stack, Text, useStyles2 } from '@grafana/ui'; import { LocationInfo } from 'app/features/search/service/types'; @@ -25,6 +27,7 @@ export function DashListItem({ onStarChange, }: Props) { const css = useStyles2(getStyles); + const shortTitle = truncate(dashboard.name, { length: 40, omission: '…' }); const onCardLinkClick = () => { reportInteraction('grafana_recently_viewed_dashboards_click_card', { @@ -54,27 +57,35 @@ export function DashListItem({ ) : ( - - - {dashboard.name} - - - - - {showFolderNames && locationInfo && ( - - )} diff --git a/public/app/plugins/panel/dashlist/styles.ts b/public/app/plugins/panel/dashlist/styles.ts index c6346480c22..e4197ef03a1 100644 --- a/public/app/plugins/panel/dashlist/styles.ts +++ b/public/app/plugins/panel/dashlist/styles.ts @@ -32,6 +32,7 @@ export const getStyles = (theme: GrafanaTheme2) => { textDecoration: 'underline', }, height: '100%', + paddingTop: theme.spacing(1.5), '&:hover': { backgroundImage: gradient, @@ -41,5 +42,8 @@ export const getStyles = (theme: GrafanaTheme2) => { dashlistCardIcon: css({ marginRight: theme.spacing(0.5), }), + dashlistCardLink: css({ + paddingTop: theme.spacing(0.5), + }), }; };