From fbaa611f1778ddfd1260d68f5b1c1fea97c976ea Mon Sep 17 00:00:00 2001
From: ssama88 <148904725+ssama88@users.noreply.github.com>
Date: Mon, 4 Dec 2023 02:52:42 -0800
Subject: [PATCH] Storybook: Fix Selected Card layout issues (#77830)

---
 packages/grafana-ui/src/components/Card/Card.tsx     | 12 ++++++++++--
 .../grafana-ui/src/components/Card/CardContainer.tsx |  2 +-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/grafana-ui/src/components/Card/Card.tsx b/packages/grafana-ui/src/components/Card/Card.tsx
index 45b7683c623..4ebb077f1fa 100644
--- a/packages/grafana-ui/src/components/Card/Card.tsx
+++ b/packages/grafana-ui/src/components/Card/Card.tsx
@@ -84,7 +84,11 @@ const Heading = ({ children, className, 'aria-label': ariaLabel }: ChildProps &
   const context = useContext(CardContext);
   const styles = useStyles2(getHeadingStyles);
 
-  const { href, onClick, isSelected } = context ?? { href: undefined, onClick: undefined, isSelected: undefined };
+  const { href, onClick, isSelected } = context ?? {
+    href: undefined,
+    onClick: undefined,
+    isSelected: undefined,
+  };
 
   return (
     <h2 className={cx(styles.heading, className)}>
@@ -99,7 +103,8 @@ const Heading = ({ children, className, 'aria-label': ariaLabel }: ChildProps &
       ) : (
         <>{children}</>
       )}
-      {isSelected !== undefined && <input aria-label="option" type="radio" readOnly checked={isSelected} />}
+      {/* Input must be readonly because we are providing a value for the checked prop with no onChange handler */}
+      {isSelected !== undefined && <input aria-label="option" type="radio" checked={isSelected} readOnly />}
     </h2>
   );
 };
@@ -119,6 +124,9 @@ const getHeadingStyles = (theme: GrafanaTheme2) => ({
     lineHeight: theme.typography.body.lineHeight,
     color: theme.colors.text.primary,
     fontWeight: theme.typography.fontWeightMedium,
+    '& input[readonly]': {
+      cursor: 'inherit',
+    },
   }),
   linkHack: css({
     all: 'unset',
diff --git a/packages/grafana-ui/src/components/Card/CardContainer.tsx b/packages/grafana-ui/src/components/Card/CardContainer.tsx
index e4a52c9f1f2..f0dc33877bd 100644
--- a/packages/grafana-ui/src/components/Card/CardContainer.tsx
+++ b/packages/grafana-ui/src/components/Card/CardContainer.tsx
@@ -79,7 +79,7 @@ export const getCardContainerStyles = (
       display: 'grid',
       position: 'relative',
       gridTemplateColumns: 'auto 1fr auto',
-      gridTemplateRows: '1fr auto auto auto',
+      gridTemplateRows: 'auto auto 1fr auto',
       gridAutoColumns: '1fr',
       gridAutoFlow: 'row',
       gridTemplateAreas: `