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