make the template card grid even and nice

Signed-off-by: Johan Haals <johan.haals@gmail.com>

plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPage.tsx

@@ -30,7 +30,7 @@ import {
   WarningPanel,
 } from '@backstage/core';
 import { useStarredEntities } from '@backstage/plugin-catalog-react';
-import { Button, Grid, Link, makeStyles, Typography } from '@material-ui/core';
+import { Box, Button, Link, makeStyles, Typography } from '@material-ui/core';
 import StarIcon from '@material-ui/icons/Star';
 import { EntityFilterGroupsProvider, useFilteredEntities } from '../../filter';
 import { TemplateCard, TemplateCardProps } from '../TemplateCard';
@@ -46,6 +46,12 @@ const useStyles = makeStyles(theme => ({
     gridTemplateColumns: '250px 1fr',
     gridColumnGap: theme.spacing(2),
   },
+  templateGrid: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(22em, 1fr))',
+    gridAutoRows: '1fr',
+    gridGap: theme.spacing(2),
+  },
 }));
 
 const getTemplateCardProps = (
@@ -177,23 +183,13 @@ export const ScaffolderPageContents = () => {
                 </Typography>
               )}
 
-            <Grid container>
+            <Box className={styles.templateGrid}>
               {matchingEntities &&
                 matchingEntities?.length > 0 &&
-                matchingEntities.map(template => {
-                  return (
-                    <Grid
-                      key={template.metadata.uid}
-                      item
-                      xs={12}
-                      sm={6}
-                      md={3}
-                    >
-                      <TemplateCard {...getTemplateCardProps(template)} />
-                    </Grid>
-                  );
-                })}
-            </Grid>
+                matchingEntities.map(template => (
+                  <TemplateCard {...getTemplateCardProps(template)} />
+                ))}
+            </Box>
           </div>
         </div>
       </Content>

plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx

@@ -37,9 +37,18 @@ const useStyles = makeStyles(theme => ({
     backgroundPosition: 0,
   },
   description: {
-    height: 175,
     overflow: 'hidden',
     textOverflow: 'ellipsis',
+    display: '-webkit-box',
+    '-webkit-line-clamp': 10,
+    '-webkit-box-orient': 'vertical',
+  },
+  card: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  cardContent: {
+    flexGrow: 1,
   },
 }));
 
@@ -69,12 +78,12 @@ export const TemplateCard = ({
   });
 
   return (
-    <Card>
+    <Card className={classes.card}>
       <div className={classes.header}>
         <Typography variant="subtitle2">{type}</Typography>
         <Typography variant="h6">{title}</Typography>
       </div>
-      <CardContent>
+      <CardContent className={classes.cardContent}>
         {tags?.map(tag => (
           <Chip label={tag} key={tag} />
         ))}