fix: use display:contents on picture elements for correct card sizing

MarkusNeusinger · claude · MarkusNeusinger · commit bfcb29eae90f · 2026-03-30T22:23:28.000+02:00
Picture element defaults to display:inline which breaks the card
aspect ratio. Using display:contents makes the img a direct layout
child of the Card, matching the original CardMedia behavior.

Co-Authored-By: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/app/src/components/ImageCard.tsx b/app/src/components/ImageCard.tsx
@@ -147,7 +147,7 @@ export const ImageCard = memo(function ImageCard({
           },
         }}
       >
-        <Box component="picture">
+        <Box component="picture" sx={{ display: 'contents' }}>
           <source
             type="image/webp"
             srcSet={buildSrcSet(image.url, 'webp')}
diff --git a/app/src/components/SpecOverview.tsx b/app/src/components/SpecOverview.tsx
@@ -143,7 +143,7 @@ function ImplementationCard({
         }}
       >
         {impl.preview_url ? (
-          <Box component="picture">
+          <Box component="picture" sx={{ display: 'contents' }}>
             <source
               type="image/webp"
               srcSet={buildSrcSet(impl.preview_url, 'webp')}

Original file line number	Diff line number	Diff line change
`@@ -147,7 +147,7 @@ export const ImageCard = memo(function ImageCard({`
`147`	`147`	`},`
`148`	`148`	`}}`
`149`	`149`	`>`
`150`		`- <Box component="picture">`
	`150`	`+ <Box component="picture" sx={{ display: 'contents' }}>`
`151`	`151`	`<source`
`152`	`152`	`type="image/webp"`
`153`	`153`	`srcSet={buildSrcSet(image.url, 'webp')}`
Original file line number	Diff line number	Diff line change
`@@ -143,7 +143,7 @@ function ImplementationCard({`
`143`	`143`	`}}`
`144`	`144`	`>`
`145`	`145`	`{impl.preview_url ? (`
`146`		`- <Box component="picture">`
	`146`	`+ <Box component="picture" sx={{ display: 'contents' }}>`
`147`	`147`	`<source`
`148`	`148`	`type="image/webp"`
`149`	`149`	`srcSet={buildSrcSet(impl.preview_url, 'webp')}`