From d945fb1ab6a6c35e9232afb55c722fe35d9ea01e Mon Sep 17 00:00:00 2001
From: Benjamin Sutter <beni_sutter@hotmail.com>
Date: Wed, 10 Jun 2026 23:48:35 +0200
Subject: [PATCH] refine(anfragencenter): compact match cards 168px, reply
 field 7 rows
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Match cards reduced to 168px wide, 60px image height — supplementary context
should not visually dominate the primary chat content. Reply textarea grows
to 7 rows so the composer takes more of the available space.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../anfragencenter/InquiryReplyComposer.tsx   |  2 +-
 .../RelatedPropertyCardPanel.tsx              | 35 +++++++++++--------
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/components/anfragencenter/InquiryReplyComposer.tsx b/src/components/anfragencenter/InquiryReplyComposer.tsx
index 7980363..8c9f356 100644
--- a/src/components/anfragencenter/InquiryReplyComposer.tsx
+++ b/src/components/anfragencenter/InquiryReplyComposer.tsx
@@ -131,7 +131,7 @@ export function InquiryReplyComposer({
         value={body}
         onChange={e => { setBody(e.target.value); setIsAIDraft(false) }}
         multiline
-        rows={5}
+        rows={7}
         placeholder="Antwort verfassen..."
         fullWidth
         sx={isAIDraft ? { '& .MuiOutlinedInput-root': { borderColor: '#ddd6fe' }, '& fieldset': { borderColor: '#ddd6fe !important' } } : {}}
diff --git a/src/components/anfragencenter/RelatedPropertyCardPanel.tsx b/src/components/anfragencenter/RelatedPropertyCardPanel.tsx
index dba7b13..09c631c 100644
--- a/src/components/anfragencenter/RelatedPropertyCardPanel.tsx
+++ b/src/components/anfragencenter/RelatedPropertyCardPanel.tsx
@@ -179,21 +179,21 @@ function MatchSliderCard({ match }: { match: AdditionalPropertyMatch }) {
       onClick={() => navigate('/supply/properties')}
       sx={{
         flexShrink: 0,
-        width: 240,
+        width: 168,
         border: '1px solid #e8e7e4',
-        borderRadius: 2,
+        borderRadius: 1.5,
         overflow: 'hidden',
         cursor: 'pointer',
         bgcolor: 'white',
         transition: 'border-color 0.15s, box-shadow 0.15s',
         '&:hover': {
           borderColor: '#b0aead',
-          boxShadow: '0 4px 14px rgba(0,0,0,0.09)',
+          boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
         },
       }}
     >
-      {/* Image — same aspectRatio: '3/2' as PropertyIntelligenceCard */}
-      <Box sx={{ position: 'relative', aspectRatio: '3/2', bgcolor: '#f4f3f0', overflow: 'hidden' }}>
+      {/* Image — 16:9 crop, compact supplementary card */}
+      <Box sx={{ position: 'relative', height: 60, bgcolor: '#f4f3f0', overflow: 'hidden' }}>
         {match.imageUrl ? (
           <Box
             component="img"
@@ -203,7 +203,7 @@ function MatchSliderCard({ match }: { match: AdditionalPropertyMatch }) {
           />
         ) : (
           <Box sx={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-            <Building2 size={20} color="#94a3b8" />
+            <Building2 size={16} color="#94a3b8" />
           </Box>
         )}
         {/* Score badge overlay */}
@@ -225,17 +225,22 @@ function MatchSliderCard({ match }: { match: AdditionalPropertyMatch }) {
           {match.matchScore}%
         </Box>
       </Box>
-      <Box sx={{ p: 1 }}>
-        <Typography
-          sx={{ fontWeight: 600, color: '#0f172a', fontSize: '0.78rem', lineHeight: 1.3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', mb: 0.25 }}
-        >
-          {match.title}
-        </Typography>
-        <Typography variant="caption" sx={{ color: '#64748b', fontSize: '0.7rem', display: 'block', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-          {match.location} · {match.areaSqm.toLocaleString('de-CH')} m²
+      <Box sx={{ p: 0.75 }}>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', mb: 0.2 }}>
+          <Typography
+            sx={{ fontWeight: 600, color: '#0f172a', fontSize: '0.75rem', lineHeight: 1.3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1, mr: 0.5 }}
+          >
+            {match.title}
+          </Typography>
+          <Typography sx={{ fontSize: '0.7rem', fontWeight: 700, color: '#152642', flexShrink: 0 }}>
+            {match.matchScore}%
+          </Typography>
+        </Box>
+        <Typography variant="caption" sx={{ color: '#64748b', fontSize: '0.68rem', display: 'block', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          {match.location}
         </Typography>
         {match.reasons[0] && (
-          <Typography variant="caption" sx={{ color: '#15803d', fontSize: '0.68rem', display: 'block', lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', mt: 0.25 }}>
+          <Typography variant="caption" sx={{ color: '#15803d', fontSize: '0.67rem', display: 'block', lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', mt: 0.2 }}>
             + {match.reasons[0]}
           </Typography>
         )}