fix: remove aspectRatio/sizing from picture wrapper to fix card layout

The <picture> element as a block container with aspectRatio doubled up
with the inner <img> aspectRatio, causing oversized cards. Fix: use
display:contents or minimal wrapper so <img> controls the layout.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: MarkusNeusinger

app/src/components/ImageCard.tsx

@@ -147,15 +147,7 @@ export const ImageCard = memo(function ImageCard({
           },
         }}
       >
-        <Box
-          component="picture"
-          sx={{
-            display: 'block',
-            width: '100%',
-            aspectRatio: '16 / 10',
-            bgcolor: '#fff',
-          }}
-        >
+        <Box component="picture">
           <source
             type="image/webp"
             srcSet={buildSrcSet(image.url, 'webp')}
@@ -178,6 +170,7 @@ export const ImageCard = memo(function ImageCard({
               width: '100%',
               aspectRatio: '16 / 10',
               objectFit: 'contain',
+              bgcolor: '#fff',
             }}
             onError={(e: React.SyntheticEvent<HTMLImageElement>) => {
               const target = e.target as HTMLImageElement;

app/src/components/SpecDetailView.tsx

@@ -87,9 +87,7 @@ export function SpecDetailView({
           <Box
             component="picture"
             sx={{
-              width: '100%',
-              height: '100%',
-              display: imageLoaded ? 'block' : 'none',
+              display: imageLoaded ? 'contents' : 'none',
             }}
           >
             <source

app/src/components/SpecOverview.tsx

@@ -143,15 +143,7 @@ function ImplementationCard({
         }}
       >
         {impl.preview_url ? (
-          <Box
-            component="picture"
-            sx={{
-              display: 'block',
-              width: '100%',
-              aspectRatio: '16/10',
-              bgcolor: '#fff',
-            }}
-          >
+          <Box component="picture">
             <source
               type="image/webp"
               srcSet={buildSrcSet(impl.preview_url, 'webp')}
@@ -172,6 +164,7 @@ function ImplementationCard({
                 width: '100%',
                 aspectRatio: '16/10',
                 objectFit: 'contain',
+                bgcolor: '#fff',
               }}
               onError={(e: React.SyntheticEvent<HTMLImageElement>) => {
                 const target = e.target as HTMLImageElement;

app/src/pages/CatalogPage.tsx

@@ -248,7 +248,7 @@ export function CatalogPage() {
                   {currentImage && (
                     <Box
                       component="picture"
-                      sx={{ display: 'block', width: '100%', height: '100%' }}
+                      sx={{ display: 'contents' }}
                     >
                       <source
                         type="image/webp"