add overflow prop on Card

Author: redsh4de

src/components/pages/downloads/CoreCard.astro

@@ -62,7 +62,7 @@ const PLATFORM_ICONS: Record<string, ImageMetadata> = {
 };
 ---
 
-<Card padding="none" class="download-card" id={id} {...rest}>
+<Card padding="none" overflow="visible" class="download-card" id={id} {...rest}>
   <div class="card-image">
     <Image src={image} alt="" format="avif" />
   </div>

src/components/ui/Card.astro

@@ -3,10 +3,12 @@ import type { HTMLTag } from "astro/types";
 
 type Padding = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 type Radius = "none" | "sm" | "md" | "lg" | "xl";
+type Overflow = "hidden" | "visible";
 
 interface Props {
   padding?: Padding;
   radius?: Radius;
+  overflow?: Overflow;
   border?: boolean;
   hover?: boolean;
   transparent?: boolean;
@@ -18,6 +20,7 @@ interface Props {
 const {
   padding = "xl",
   radius = "md",
+  overflow = "hidden",
   border = false,
   hover = false,
   transparent = false,
@@ -35,7 +38,7 @@ const cardRadius = radius === "none" ? "0" : `var(--radius-${radius})`;
   data-border={border || undefined}
   data-hover={hover || undefined}
   data-transparent={transparent || undefined}
-  style={`--card-padding: ${cardPadding}; --card-radius: ${cardRadius}`}
+  style={`--card-padding: ${cardPadding}; --card-radius: ${cardRadius}; --card-overflow: ${overflow}`}
   {...rest}
 >
   <slot />
@@ -46,7 +49,7 @@ const cardRadius = radius === "none" ? "0" : `var(--radius-${radius})`;
     background: var(--card-color);
     padding: var(--card-padding);
     border-radius: var(--card-radius);
-    overflow: hidden;
+    overflow: var(--card-overflow);
 
     &[data-border] {
       border: 1px solid var(--border-color);