From 76fd722e33812ce58955f36dbb57598d5fad83c5 Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Sun, 13 Apr 2025 18:20:15 +0800
Subject: [PATCH] feat: Improve card layout by adding overflow hidden and
 fixing flexbox sizing issues

---
 static/css/components/card.css | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/static/css/components/card.css b/static/css/components/card.css
index e1d77d50..ed424827 100644
--- a/static/css/components/card.css
+++ b/static/css/components/card.css
@@ -23,6 +23,7 @@
     cursor: pointer; /* Added from recipe-card */
     display: flex; /* Added from recipe-card */
     flex-direction: column; /* Added from recipe-card */
+    overflow: hidden; /* Add overflow hidden to contain children */
 }
 
 .lora-card:hover {
@@ -50,9 +51,11 @@
 .card-preview {
     position: relative;
     width: 100%;
-    height: 100%;
+    height: 100%; /* This should work with aspect-ratio on parent */
     border-radius: var(--border-radius-base);
     overflow: hidden;
+    flex-shrink: 0; /* Prevent shrinking */
+    min-height: 0; /* Fix for potential flexbox sizing issue in Firefox */
 }
 
 .card-preview img,