From fe5aa3e2810547ce31b09ff45d0f39f46d606ae8 Mon Sep 17 00:00:00 2001
From: Yunwen Zheng <yunwen.zheng@grafana.com>
Date: Tue, 13 Jan 2026 10:20:17 -0500
Subject: [PATCH] RecentlyViewedDashboards: UI tweaks (#116171)

---
 .../components/RecentlyViewedDashboards.tsx   |  1 +
 .../plugins/panel/dashlist/DashListItem.tsx   | 51 +++++++++++--------
 public/app/plugins/panel/dashlist/styles.ts   |  4 ++
 3 files changed, 36 insertions(+), 20 deletions(-)

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