johannes.gasser/property-match
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refine(anfragencenter): compact match cards 168px, reply field 7 rows

Browse Source 
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>
This commit is contained in:
Benjamin Sutter
2026-06-10 23:48:35 +02:00
parent f783cf6881
commit d945fb1ab6
2 changed files with 21 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/anfragencenter/InquiryReplyComposer.tsx
+1 -1
View File
@@ -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' } } : {}}
src/components/anfragencenter/RelatedPropertyCardPanel.tsx
+20 -15
View File
@@ -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>
)}