Add support for fullHeight variant

Signed-off-by: Rob Long <Robert.Long@lv.com>

.changeset/tidy-garlics-decide.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+Add support for fullHeight variant to the AboutCard

plugins/catalog/src/components/AboutCard/AboutCard.tsx

@@ -23,6 +23,7 @@ import {
 import {
   HeaderIconLinkRow,
   IconLinkVerticalProps,
+  InfoCardVariants,
   useApi,
 } from '@backstage/core';
 import { scmIntegrationsApiRef } from '@backstage/integration-react';
@@ -50,15 +51,23 @@ const useStyles = makeStyles({
     height: 'calc(100% - 10px)', // for pages without content header
     marginBottom: '10px',
   },
+  fullHeightCard: {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+  },
   gridItemCardContent: {
     flex: 1,
   },
+  fullHeightCardContent: {
+    flex: 1,
+  },
 });
 
 type AboutCardProps = {
   /** @deprecated The entity is now grabbed from context instead */
   entity?: Entity;
-  variant?: 'gridItem';
+  variant?: InfoCardVariants;
 };
 
 export function AboutCard({ variant }: AboutCardProps) {
@@ -103,8 +112,22 @@ export function AboutCard({ variant }: AboutCardProps) {
     href: 'api',
   };
 
+  let cardClass = '';
+  if (variant === 'gridItem') {
+    cardClass = classes.gridItemCard;
+  } else if (variant === 'fullHeight') {
+    cardClass = classes.fullHeightCard;
+  }
+
+  let cardContentClass = '';
+  if (variant === 'gridItem') {
+    cardContentClass = classes.gridItemCardContent;
+  } else if (variant === 'fullHeight') {
+    cardContentClass = classes.fullHeightCardContent;
+  }
+
   return (
-    <Card className={variant === 'gridItem' ? classes.gridItemCard : ''}>
+    <Card className={cardClass}>
       <CardHeader
         title="About"
         action={
@@ -124,9 +147,7 @@ export function AboutCard({ variant }: AboutCardProps) {
         }
       />
       <Divider />
-      <CardContent
-        className={variant === 'gridItem' ? classes.gridItemCardContent : ''}
-      >
+      <CardContent className={cardContentClass}>
         <AboutContent entity={entity} />
       </CardContent>
     </Card>