From 5e0b1ddf6e9d6cd2216934eb3a296dbc2fd5b295 Mon Sep 17 00:00:00 2001
From: Richie <richie.phillips@proton.me>
Date: Mon, 30 Mar 2026 22:00:14 +1100
Subject: [PATCH] CrematoriumStep: stacked card layout (image top, details
 below)

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>
---
 .../pages/CrematoriumStep/CrematoriumStep.tsx | 56 +++++++------------
 1 file changed, 21 insertions(+), 35 deletions(-)

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