diff --git a/src/components/elements/GridCard/GridCard.module.css b/src/components/elements/GridCard/GridCard.module.css index 9126058a6d..4043bf23ba 100644 --- a/src/components/elements/GridCard/GridCard.module.css +++ b/src/components/elements/GridCard/GridCard.module.css @@ -62,11 +62,12 @@ align-items: center; gap: 0.375rem; margin-left: auto; + flex-shrink: 0; } .icons svg { - width: 22px; - height: 22px; + width: 32px; + height: 32px; pointer-events: none; } @@ -83,11 +84,19 @@ flex: 1; } +.cardFooter { + display: flex; + align-items: center; + gap: 0.5rem; + margin-top: auto; +} + .cardMeta { display: flex; flex-wrap: wrap; gap: 0.375rem; - margin-top: auto; + flex: 1; + min-width: 0; } .badge { diff --git a/src/components/elements/GridCard/GridCard.tsx b/src/components/elements/GridCard/GridCard.tsx index 1939177043..19ff6bfdbc 100644 --- a/src/components/elements/GridCard/GridCard.tsx +++ b/src/components/elements/GridCard/GridCard.tsx @@ -45,7 +45,7 @@ export type GridCardProps = { description: string; href: string; tags?: string[]; - /** Rendered top-right of the header, e.g. an SDK logo. */ + /** Rendered bottom-right, alongside the tags, e.g. an SDK logo. */ icon?: React.ReactNode; analyticsId?: string; }; @@ -69,16 +69,20 @@ export default function GridCard({ title, description, href, tags = [], icon, an {title} {showExternalIcon && } - {icon &&
{icon}
}

{description}

- {tags.length > 0 && ( -
- {tags.map((tag) => ( - - {tag} - - ))} + {(tags.length > 0 || icon) && ( +
+ {tags.length > 0 && ( +
+ {tags.map((tag) => ( + + {tag} + + ))} +
+ )} + {icon &&
{icon}
}
)}