fix: compact side-by-side image+map in PropertyDetailView drawer (140px)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Sutter
2026-05-18 21:11:38 +02:00
parent 732231ce13
commit 259b4e3c68
+25 -22
View File
@@ -13,7 +13,7 @@ import {
import { X } from 'lucide-react'
import { NegotiationInsightsPanel } from './NegotiationInsightsPanel'
import { DataQualityPanel as DQPanel, ProvenancePanel } from '../data-quality'
import { LocationPreview, PropertyMap } from '../shared'
import { PropertyMap } from '../shared'
import type { Property } from '../../domain/property'
import type { Match } from '../../domain/match'
import type { FutureSignal } from '../../domain/futureSignal'
@@ -366,27 +366,30 @@ export function PropertyDetailView({ propertyId, onClose }: PropertyDetailViewPr
)}
</Box>
{/* Photo + Map */}
<Box sx={{ flexShrink: 0 }}>
{property.images?.[0] && (
<LocationPreview
imageUrl={property.images[0]}
lat={property.location.coordinates?.lat}
lng={property.location.coordinates?.lng}
address={`${property.address.street} ${property.address.houseNumber}, ${property.address.city}`}
cityLabel={property.location.city}
height={180}
/>
)}
{property.location.coordinates && (
<PropertyMap
lat={property.location.coordinates.lat}
lng={property.location.coordinates.lng}
label={property.title}
height={240}
/>
)}
</Box>
{/* Photo + Map — side by side, compact */}
{(property.images?.[0] || property.location.coordinates) && (
<Box sx={{ display: 'flex', flexShrink: 0, height: 140, borderBottom: '1px solid #e2e8f0' }}>
{property.images?.[0] && (
<Box sx={{ flex: property.location.coordinates ? '0 0 55%' : 1, overflow: 'hidden' }}>
<img
src={property.images[0]}
alt={property.title}
style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
/>
</Box>
)}
{property.location.coordinates && (
<Box sx={{ flex: 1, overflow: 'hidden' }}>
<PropertyMap
lat={property.location.coordinates.lat}
lng={property.location.coordinates.lng}
label={property.title}
height={140}
/>
</Box>
)}
</Box>
)}
{/* Tabs */}
<Tabs