From 6b53f927b27a3f266d1d208980ad3fdcfcb557b1 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Mon, 23 Jan 2023 17:07:36 +0000
Subject: [PATCH] Navigation: truncate landing page descriptions to 3 lines
 (#61925)

* truncate landing page descriptions to 3 lines

* use correct css prop names
---
 .../app/core/components/AppChrome/NavLandingPage.tsx   |  2 +-
 .../core/components/AppChrome/NavLandingPageCard.tsx   | 10 +++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/public/app/core/components/AppChrome/NavLandingPage.tsx b/public/app/core/components/AppChrome/NavLandingPage.tsx
index 461e16cdd19..0143eebbaf0 100644
--- a/public/app/core/components/AppChrome/NavLandingPage.tsx
+++ b/public/app/core/components/AppChrome/NavLandingPage.tsx
@@ -51,7 +51,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     display: 'grid',
     gap: theme.spacing(3),
     gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
-    gridAutoRows: '130px',
+    gridAutoRows: '138px',
     padding: theme.spacing(2, 0),
   }),
 });
diff --git a/public/app/core/components/AppChrome/NavLandingPageCard.tsx b/public/app/core/components/AppChrome/NavLandingPageCard.tsx
index 8ed4a426729..23f582bdac3 100644
--- a/public/app/core/components/AppChrome/NavLandingPageCard.tsx
+++ b/public/app/core/components/AppChrome/NavLandingPageCard.tsx
@@ -15,7 +15,7 @@ export function NavLandingPageCard({ description, text, url }: Props) {
   return (
     <Card className={styles.card} href={url}>
       <Card.Heading>{text}</Card.Heading>
-      <Card.Description>{description}</Card.Description>
+      <Card.Description className={styles.description}>{description}</Card.Description>
     </Card>
   );
 }
@@ -25,4 +25,12 @@ const getStyles = (theme: GrafanaTheme2) => ({
     marginBottom: 0,
     gridTemplateRows: '1fr 0 2fr',
   }),
+  // Limit descriptions to 3 lines max before ellipsing
+  // Some plugin descriptions can be very long
+  description: css({
+    WebkitLineClamp: 3,
+    WebkitBoxOrient: 'vertical',
+    display: '-webkit-box',
+    overflow: 'hidden',
+  }),
 });