From fe0486915e5c17ceba871cedb04d9698c3357781 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Fri, 14 Nov 2025 15:57:31 +0000
Subject: [PATCH] Card: Adjust grid styles conditionally based on the presence
 of description (#113848)

* adjust card grid styles conditionally based on presence of description

* handle everything as part of `gridTemplate`
---
 .../grafana-ui/src/components/Card/Card.tsx   | 15 +++++++++++-
 .../src/components/Card/CardContainer.tsx     | 23 +++++++++++++------
 2 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/packages/grafana-ui/src/components/Card/Card.tsx b/packages/grafana-ui/src/components/Card/Card.tsx
index f1514f6f60e..e30781db632 100644
--- a/packages/grafana-ui/src/components/Card/Card.tsx
+++ b/packages/grafana-ui/src/components/Card/Card.tsx
@@ -69,10 +69,22 @@ export const Card: CardInterface = ({
     () => React.Children.toArray(children).some((c) => React.isValidElement(c) && c.type === Heading),
     [children]
   );
+  const hasDescriptionComponent = useMemo(
+    () => React.Children.toArray(children).some((c) => React.isValidElement(c) && c.type === Description),
+    [children]
+  );
 
   const disableHover = disabled || (!onClick && !href);
   const onCardClick = onClick && !disabled ? onClick : undefined;
-  const styles = useStyles2(getCardContainerStyles, disabled, disableHover, isSelected, isCompact, noMargin);
+  const styles = useStyles2(
+    getCardContainerStyles,
+    disabled,
+    disableHover,
+    hasDescriptionComponent,
+    isSelected,
+    isCompact,
+    noMargin
+  );
 
   return (
     <CardContainer
@@ -81,6 +93,7 @@ export const Card: CardInterface = ({
       isSelected={isSelected}
       className={cx(styles.container, className)}
       noMargin={noMargin}
+      hasDescriptionComponent={hasDescriptionComponent}
       {...htmlProps}
     >
       <CardContext.Provider value={{ href, onClick: onCardClick, disabled, isSelected }}>
diff --git a/packages/grafana-ui/src/components/Card/CardContainer.tsx b/packages/grafana-ui/src/components/Card/CardContainer.tsx
index f970356ec80..1e64bba41a8 100644
--- a/packages/grafana-ui/src/components/Card/CardContainer.tsx
+++ b/packages/grafana-ui/src/components/Card/CardContainer.tsx
@@ -49,6 +49,7 @@ export interface CardContainerProps extends HTMLAttributes<HTMLOrSVGElement>, Ca
   className?: string;
   /** Remove the bottom margin */
   noMargin?: boolean;
+  hasDescriptionComponent?: boolean;
 }
 
 /** @deprecated Using `CardContainer` directly is discouraged and should be replaced with `Card` */
@@ -60,12 +61,14 @@ export const CardContainer = ({
   className,
   href,
   noMargin,
+  hasDescriptionComponent = false,
   ...props
 }: CardContainerProps) => {
   const { oldContainer } = useStyles2(
     getCardContainerStyles,
     disableEvents,
     disableHover,
+    hasDescriptionComponent,
     isSelected,
     undefined,
     noMargin
@@ -82,6 +85,7 @@ export const getCardContainerStyles = (
   theme: GrafanaTheme2,
   disabled = false,
   disableHover = false,
+  hasDescriptionComponent: boolean,
   isSelected?: boolean,
   isCompact?: boolean,
   noMargin = false
@@ -92,15 +96,20 @@ export const getCardContainerStyles = (
     container: css({
       display: 'grid',
       position: 'relative',
-      gridTemplateColumns: 'auto 1fr auto',
-      gridTemplateRows: 'auto auto 1fr auto',
-      gridAutoColumns: '1fr',
-      gridAutoFlow: 'row',
-      gridTemplateAreas: `
+      gridTemplate: hasDescriptionComponent
+        ? `
         "Figure Heading Tags"
         "Figure Meta Tags"
-        "Figure Description Tags"
-        "Figure Actions Secondary"`,
+        "Figure Description Tags" 1fr
+        "Figure Actions Secondary" / auto 1fr auto
+      `
+        : `
+        "Figure Heading Tags" 1fr
+        "Figure Meta Tags"
+        "Figure Actions Secondary" / auto 1fr auto
+      `,
+      gridAutoColumns: '1fr',
+      gridAutoFlow: 'row',
       width: '100%',
       padding: theme.spacing(isCompact ? 1 : 2),
       background: theme.colors.background.secondary,