RecentlyViewedDashboards: UI tweaks (#116171)

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

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({
         </div>
       ) : (
         <Card className={css.dashlistCard} noMargin>
-          <Stack justifyContent="space-between" alignItems="center">
-            <Link href={url} onClick={onCardLinkClick}>
-              {dashboard.name}
-            </Link>
-            <StarToolbarButton
-              title={dashboard.name}
-              group="dashboard.grafana.app"
-              kind="Dashboard"
-              id={dashboard.uid}
-              onStarChange={onStarChange}
-            />
-          </Stack>
-
-          {showFolderNames && locationInfo && (
-            <Stack alignItems="center" direction="row" gap={0}>
-              <Icon name="folder" size="sm" className={css.dashlistCardIcon} aria-hidden="true" />
-              <Text color="secondary" variant="bodySmall" element="p">
-                {locationInfo?.name}
-              </Text>
+          <Stack direction="column" justifyContent="space-between" height="100%">
+            <Stack justifyContent="space-between" alignItems="start">
+              <Link
+                className={css.dashlistCardLink}
+                href={url}
+                aria-label={dashboard.name}
+                title={dashboard.name}
+                onClick={onCardLinkClick}
+              >
+                {shortTitle}
+              </Link>
+              <StarToolbarButton
+                title={dashboard.name}
+                group="dashboard.grafana.app"
+                kind="Dashboard"
+                id={dashboard.uid}
+                onStarChange={onStarChange}
+              />
             </Stack>
-          )}
+
+            {showFolderNames && locationInfo && (
+              <Stack alignItems="start" direction="row" gap={0.5} height="25%">
+                <Icon name="folder" size="sm" className={css.dashlistCardIcon} aria-hidden="true" />
+                <Text color="secondary" variant="bodySmall" element="p">
+                  {locationInfo?.name}
+                </Text>
+              </Stack>
+            )}
+          </Stack>
         </Card>
       )}
     </>

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