richie/Parsons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CrematoriumStep: stacked card layout (image top, details below)

Browse Source 
Horizontal compact card was cramped with long addresses/distances.
Stacked layout gives full width to both image and text. Icons bumped
to 18px with flex-start alignment for proper baseline alignment.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Richie
2026-03-30 22:00:14 +11:00
parent 9d67c653ac
commit 5e0b1ddf6e
1 changed files with 21 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/pages/CrematoriumStep/CrematoriumStep.tsx
View File

@@ -146,59 +146,45 @@ export const CrematoriumStep: React.FC<CrematoriumStepProps> = ({
}} }}
> >
{/* ─── Crematorium card ─── */} {/* ─── Crematorium card ─── */}
<Card <Card variant="outlined" padding="none" sx={{ overflow: 'hidden', mb: 4 }}>
variant="outlined"
padding="none"
sx={{
display: 'flex',
overflow: 'hidden',
mb: 4,
}}
>
{crematorium.imageUrl && ( {crematorium.imageUrl && (
<Box <Box
role="img" role="img"
aria-label={`${crematorium.name} photo`} aria-label={`${crematorium.name} photo`}
sx={{ sx={{
width: { xs: 140, sm: 200 }, height: { xs: 160, sm: 180 },
flexShrink: 0,
backgroundImage: `url(${crematorium.imageUrl})`, backgroundImage: `url(${crematorium.imageUrl})`,
backgroundSize: 'cover', backgroundSize: 'cover',
backgroundPosition: 'center', backgroundPosition: 'center',
}} }}
/> />
)} )}
<Box <Box sx={{ p: 2.5, display: 'flex', flexDirection: 'column', gap: 1 }}>
sx={{ <Typography variant="h6" component="span">
flex: 1,
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
gap: 0.75,
p: 2.5,
minWidth: 0,
}}
>
<Typography variant="h6" component="span" maxLines={2}>
{crematorium.name} {crematorium.name}
</Typography> </Typography>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}> <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
<LocationOnOutlinedIcon sx={{ fontSize: 14, color: 'text.secondary' }} aria-hidden /> <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1 }}>
<Typography variant="body2" color="text.secondary"> <LocationOnOutlinedIcon
{crematorium.address} sx={{ fontSize: 18, color: 'text.secondary', mt: 0.25 }}
</Typography>
</Box>
{crematorium.distance && (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
<DirectionsCarOutlinedIcon
sx={{ fontSize: 14, color: 'text.secondary' }}
aria-hidden aria-hidden
/> />
<Typography variant="body2" color="text.secondary"> <Typography variant="body2" color="text.secondary">
{crematorium.distance} {crematorium.address}
</Typography> </Typography>
</Box> </Box>
)} {crematorium.distance && (
<Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1 }}>
<DirectionsCarOutlinedIcon
sx={{ fontSize: 18, color: 'text.secondary', mt: 0.25 }}
aria-hidden
/>
<Typography variant="body2" color="text.secondary">
{crematorium.distance}
</Typography>
</Box>
)}
</Box>
</Box> </Box>
</Card> </Card>