diff --git a/src/components/anfragencenter/RelatedPropertyCardPanel.tsx b/src/components/anfragencenter/RelatedPropertyCardPanel.tsx
index 6c61a8e..696abf7 100644
--- a/src/components/anfragencenter/RelatedPropertyCardPanel.tsx
+++ b/src/components/anfragencenter/RelatedPropertyCardPanel.tsx
@@ -39,71 +39,97 @@ export function RelatedPropertyCardPanel({ propertyId, inquiryId, compact }: Rel
const image = property.images?.[0]
- const detailRows = (
-
-
-
-
- {property.location.city}
- {property.location.district ? `, ${property.location.district}` : ''}
-
-
-
-
-
- {property.areaSqm.toLocaleString('de-CH')} m² · CHF {property.rentPricePerSqm}/m²/Jahr
-
-
-
-
-
- Verfügbar ab {new Date(property.availabilityDate).toLocaleDateString('de-CH')}
-
-
-
- )
-
- const matchesSection = (
- <>
-
- Weitere passende Objekte
-
- {loadingMatches ? (
-
- ) : additionalMatches.length === 0 ? (
-
- Keine weiteren Matches
-
- ) : (
-
- {additionalMatches.map(m => (
-
- ))}
-
- )}
- >
- )
-
if (compact) {
return (
-
-
-
- {property.title}
-
- {detailRows}
- }
- onClick={() => navigate('/supply/properties')}
- sx={{ textTransform: 'none', alignSelf: 'flex-start', mt: 'auto' }}
+
+ {/* Left: current property with thumbnail */}
+
+
- Objekt ansehen
-
+ {!image && }
+
+
+
+ {property.title}
+
+
+
+
+ {property.location.city}{property.location.district ? `, ${property.location.district}` : ''}
+
+
+
+
+
+ {property.areaSqm.toLocaleString('de-CH')} m² · CHF {property.rentPricePerSqm}/m²/J.
+
+
+
+
+
+ ab {new Date(property.availabilityDate).toLocaleDateString('de-CH', { month: 'short', year: 'numeric' })}
+
+
+ }
+ onClick={() => navigate('/supply/properties')}
+ sx={{ textTransform: 'none', fontSize: '0.72rem', p: 0, minWidth: 0, color: '#152642', alignSelf: 'flex-start', mt: 0.25 }}
+ >
+ Ansehen
+
+
-
- {matchesSection}
+
+ {/* Vertical divider */}
+
+
+ {/* Right: horizontal scroll rail */}
+
+
+ Weitere passende Objekte
+
+ {loadingMatches ? (
+
+ ) : additionalMatches.length === 0 ? (
+
+ Keine weiteren Matches
+
+ ) : (
+
+ {additionalMatches.map(m => (
+
+ ))}
+
+ )}
)
@@ -143,7 +169,27 @@ export function RelatedPropertyCardPanel({ propertyId, inquiryId, compact }: Rel
{property.title}
- {detailRows}
+
+
+
+
+ {property.location.city}
+ {property.location.district ? `, ${property.location.district}` : ''}
+
+
+
+
+
+ {property.areaSqm.toLocaleString('de-CH')} m² · CHF {property.rentPricePerSqm}/m²/Jahr
+
+
+
+
+
+ Verfügbar ab {new Date(property.availabilityDate).toLocaleDateString('de-CH')}
+
+
+
{property.description && (
@@ -162,9 +208,75 @@ export function RelatedPropertyCardPanel({ propertyId, inquiryId, compact }: Rel
-
- {matchesSection}
+
+ Weitere passende Objekte
+
+
+ {loadingMatches ? (
+
+ ) : additionalMatches.length === 0 ? (
+
+ Keine weiteren Matches
+
+ ) : (
+
+ {additionalMatches.map(m => (
+
+ ))}
+
+ )}
+
+ )
+}
+
+function MatchRailCard({ match }: { match: AdditionalPropertyMatch }) {
+ const navigate = useNavigate()
+ return (
+ navigate('/supply/properties')}
+ sx={{
+ flexShrink: 0,
+ width: 148,
+ cursor: 'pointer',
+ '&:hover .rail-title': { color: '#2563eb' },
+ }}
+ >
+
+ {!match.imageUrl && }
+
+
+ {match.title}
+
+
+ {match.matchScore}%
+
+
+
+ {match.location} · {match.areaSqm.toLocaleString('de-CH')} m²
+
+ {match.reasons[0] && (
+
+ + {match.reasons[0]}
+
+ )}
)
}