CrematoriumStep: more generous compact card sizing
Image 140/200px (was 120/160), content padding 2.5 (was 2), row gap 0.75 (was 0.5). Matches live site proportions better. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -145,14 +145,13 @@ export const CrematoriumStep: React.FC<CrematoriumStepProps> = ({
|
|||||||
if (!loading) onContinue();
|
if (!loading) onContinue();
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* ─── Compact crematorium card ─── */}
|
{/* ─── Crematorium card ─── */}
|
||||||
<Card
|
<Card
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
padding="none"
|
padding="none"
|
||||||
sx={{
|
sx={{
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
minHeight: 100,
|
|
||||||
mb: 4,
|
mb: 4,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
@@ -161,7 +160,7 @@ export const CrematoriumStep: React.FC<CrematoriumStepProps> = ({
|
|||||||
role="img"
|
role="img"
|
||||||
aria-label={`${crematorium.name} photo`}
|
aria-label={`${crematorium.name} photo`}
|
||||||
sx={{
|
sx={{
|
||||||
width: { xs: 120, sm: 160 },
|
width: { xs: 140, sm: 200 },
|
||||||
flexShrink: 0,
|
flexShrink: 0,
|
||||||
backgroundImage: `url(${crematorium.imageUrl})`,
|
backgroundImage: `url(${crematorium.imageUrl})`,
|
||||||
backgroundSize: 'cover',
|
backgroundSize: 'cover',
|
||||||
@@ -175,8 +174,8 @@ export const CrematoriumStep: React.FC<CrematoriumStepProps> = ({
|
|||||||
display: 'flex',
|
display: 'flex',
|
||||||
flexDirection: 'column',
|
flexDirection: 'column',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
gap: 0.5,
|
gap: 0.75,
|
||||||
p: 2,
|
p: 2.5,
|
||||||
minWidth: 0,
|
minWidth: 0,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user