From 216019f29afb7cf118535093af7f2fd83b9fa5d4 Mon Sep 17 00:00:00 2001
From: unclecode <unclecode@kidocode.com>
Date: Sat, 11 Oct 2025 12:52:04 +0800
Subject: [PATCH] fix(marketplace): prevent hero image overflow and secondary
 card stretching

- Fixed hero image to 200px height with min/max constraints
- Added object-fit: cover to hero-image img elements
- Changed secondary-featured align-items from stretch to flex-start
- Fixed secondary-card height to 118px (no flex: 1 stretching)
- Updated responsive grid layouts for wider screens
- Added flex: 1 to hero-content for better content distribution

These changes ensure a rigid, predictable layout that prevents:
1. Large images from pushing text content down
2. Single secondary cards from stretching to fill entire height
---
 docs/md_v2/marketplace/marketplace.css | 34 +++++++++++++++++++++-----
 1 file changed, 28 insertions(+), 6 deletions(-)

diff --git a/docs/md_v2/marketplace/marketplace.css b/docs/md_v2/marketplace/marketplace.css
index a95c4a41..57f54d22 100644
--- a/docs/md_v2/marketplace/marketplace.css
+++ b/docs/md_v2/marketplace/marketplace.css
@@ -231,7 +231,9 @@ a:hover {
 
 .hero-image {
     width: 100%;
-    height: 240px;
+    height: 200px;
+    min-height: 200px;
+    max-height: 200px;
     background: linear-gradient(135deg, rgba(80, 255, 255, 0.1), rgba(243, 128, 245, 0.05));
     background-size: cover;
     background-position: center;
@@ -243,6 +245,14 @@ a:hover {
     flex-shrink: 0;
     position: relative;
     filter: brightness(1.1) contrast(1.1);
+    overflow: hidden;
+}
+
+.hero-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
 }
 
 .hero-image::after {
@@ -257,6 +267,10 @@ a:hover {
 
 .hero-content {
     padding: 1.5rem;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
 }
 
 .hero-badge {
@@ -301,9 +315,9 @@ a:hover {
 /* Secondary Featured */
 .secondary-featured {
     grid-column: 1 / -1;
-    height: 380px;
+    min-height: 380px;
     display: flex;
-    align-items: stretch;
+    align-items: flex-start;
 }
 
 .featured-secondary-cards {
@@ -311,7 +325,7 @@ a:hover {
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
-    justify-content: space-between;
+    align-items: stretch;
 }
 
 .secondary-card {
@@ -321,8 +335,10 @@ a:hover {
     transition: all 0.3s ease;
     display: flex;
     overflow: hidden;
-    height: calc((380px - 1.5rem) / 3);
-    flex: 1;
+    height: 118px;
+    min-height: 118px;
+    max-height: 118px;
+    flex-shrink: 0;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
 }
 
@@ -875,10 +891,13 @@ a:hover {
     .secondary-featured {
         grid-column: 3 / 5;
         grid-row: 1;
+        min-height: auto;
     }
 
     .featured-secondary-cards {
+        display: grid;
         grid-template-columns: repeat(2, 1fr);
+        flex-direction: unset;
     }
 
     .main-content {
@@ -906,10 +925,13 @@ a:hover {
 
     .secondary-featured {
         grid-column: 3 / 6;
+        min-height: auto;
     }
 
     .featured-secondary-cards {
+        display: grid;
         grid-template-columns: repeat(3, 1fr);
+        flex-direction: unset;
     }
 
     .sponsored-section {