From f783cf6881302151463154ddb9f5f152aea4be5c Mon Sep 17 00:00:00 2001
From: Benjamin Sutter <beni_sutter@hotmail.com>
Date: Wed, 10 Jun 2026 23:47:11 +0200
Subject: [PATCH] fix(anfragencenter): use aspectRatio 3/2 for match card
 images like PropertyIntelligenceCard
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces fixed height: 90px with aspectRatio: '3/2' — the same ratio used in
supply property cards. Ensures consistent, undistorted image crops across all
card surfaces. objectFit: cover guaranteed via <img> element.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../anfragencenter/RelatedPropertyCardPanel.tsx | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/components/anfragencenter/RelatedPropertyCardPanel.tsx b/src/components/anfragencenter/RelatedPropertyCardPanel.tsx
index acfd303..dba7b13 100644
--- a/src/components/anfragencenter/RelatedPropertyCardPanel.tsx
+++ b/src/components/anfragencenter/RelatedPropertyCardPanel.tsx
@@ -92,20 +92,19 @@ export function RelatedPropertyCardPanel({ propertyId, inquiryId, compact }: Rel
     >
       <Box
         sx={{
-          height: 80,
+          aspectRatio: '3/2',
           borderRadius: 1.5,
           overflow: 'hidden',
-          bgcolor: '#e8e7e4',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
+          bgcolor: '#f4f3f0',
         }}
       >
         {image ? (
           <Box component="img" src={image} alt={property.title}
             sx={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
         ) : (
-          <Building2 size={32} color="#94a3b8" />
+          <Box sx={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <Building2 size={32} color="#94a3b8" />
+          </Box>
         )}
       </Box>
 
@@ -193,8 +192,8 @@ function MatchSliderCard({ match }: { match: AdditionalPropertyMatch }) {
         },
       }}
     >
-      {/* Image with consistent aspect ratio */}
-      <Box sx={{ position: 'relative', height: 90, overflow: 'hidden', bgcolor: '#f4f3f0' }}>
+      {/* Image — same aspectRatio: '3/2' as PropertyIntelligenceCard */}
+      <Box sx={{ position: 'relative', aspectRatio: '3/2', bgcolor: '#f4f3f0', overflow: 'hidden' }}>
         {match.imageUrl ? (
           <Box
             component="img"
@@ -203,7 +202,7 @@ function MatchSliderCard({ match }: { match: AdditionalPropertyMatch }) {
             sx={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
           />
         ) : (
-          <Box sx={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          <Box sx={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
             <Building2 size={20} color="#94a3b8" />
           </Box>
         )}