@bytebrand/fe-ui-core-autobahn 1.0.63 → 1.0.65

package/cards/CarRow.tsx

@@ -86,7 +86,9 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({ car, isFavorite, onToggl
       style={{ background: 'var(--md-sc-lowest)' }}
     >
       <div className="listcard-media" style={{ position: 'relative' }} onMouseEnter={onMediaEnter} onTouchStart={onMediaEnter}>
-        <CardCarousel images={car.gallery} height="100%" fit="contain" onChange={setPhotoIndex} />
+        {/* 'auto': desktop picks cover/contain per photo (crops only when it wouldn't lose too
+            much of the shot); below 601px this is identical to 'contain', so mobile is unchanged. */}
+        <CardCarousel images={car.gallery} height="100%" fit="auto" onChange={setPhotoIndex} />
         {/* deal badges — ONE compact line: NEU · −€ · 0 € Anz. · −%, plus the "⚡ Angebot" badge
             (Figma) on its own line below. The price RATING ('Guter Preis') is NOT here — it
             lives in the price column (PriceMeter). */}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.63",
+  "version": "1.0.65",
   "description": "auto.de md3 (Autobahn) design system — UI primitives, cards, chrome, VDP modules, theme CSS and locales. Ships raw TypeScript source (like fe-ui-core before it); each consumer's bundler compiles it.",
   "main": "index.ts",
   "license": "UNLICENSED",

package/theme/md3.css

@@ -4040,14 +4040,6 @@ line-height: 31px;
   .md3 .specstrip > span:nth-child(1) { order: -3; }
   .md3 .specstrip > span:nth-child(2) { order: -2; }
   .md3 .specstrip > span:nth-child(4) { order: -1; }
-  /* mcard (SRP CarRow) photo: fill the media box edge-to-edge on desktop (Figma "mcard") instead
-     of the letterboxed object-fit:contain CardCarousel applies by default (that "contain" +
-     padding is still correct on mobile, untouched — this overrides only the desktop rendering,
-     since CardCarousel's `fit`/`padded` props are one shared JS value for both breakpoints). */
-  .md3 .listcard-media .cardcar img {
-    object-fit: cover !important;
-    padding: 0 !important;
-  }
 }
 /* filter rail: collapsible sections */
 .md3 .frail-group {

package/ui/CardCarousel.tsx

@@ -10,8 +10,15 @@ export interface CardCarouselProps {
   radius?: number | string;
   /** fired with the new active index whenever the slide changes. */
   onChange?: (index: number) => void;
-  /** object-fit for each image; 'contain' adds inset padding by default. */
-  fit?: 'cover' | 'contain';
+  /**
+   * object-fit for each image; 'contain' adds inset padding by default. 'auto' always fills the
+   * box's full WIDTH (never a left/right gap) and lets height follow the image's own aspect
+   * ratio — landscape photos in this taller-than-wide card box typically end up shorter than the
+   * box (a top/bottom gap, filled by the studio-white background), while a portrait/near-square
+   * photo can end up taller than the box and get cropped top/bottom by its overflow:hidden. 'auto'
+   * behaves exactly like 'contain' below 601px viewport width (no change to any mobile rendering).
+   */
+  fit?: 'cover' | 'contain' | 'auto';
   /** set false to drop the 5%/6% inset padding 'contain' normally adds (e.g. the VDP
    * gallery, which wants the image filling the box edge-to-edge). Defaults to true. */
   padded?: boolean;
@@ -50,6 +57,21 @@ const CardCarousel: React.FunctionComponent<CardCarouselProps> = ({
   const go = (d: number, e?: React.SyntheticEvent) => jump((i + d + n) % n, e);
   const trackRef = useRef<HTMLDivElement>(null);
   const tx = useRef<number | null>(null);
+
+  // 'auto' mode only diverges from plain 'contain' at desktop widths — below 601px it resolves
+  // to 'contain' unconditionally, so mobile's existing rendering is untouched either way.
+  const [isDesktop, setIsDesktop] = useState(
+    () => fit === 'auto' && typeof window !== 'undefined' && window.matchMedia('(min-width: 601px)').matches,
+  );
+  useEffect(() => {
+    if (fit !== 'auto' || typeof window === 'undefined') return;
+    const mq = window.matchMedia('(min-width: 601px)');
+    const handler = () => setIsDesktop(mq.matches);
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  }, [fit]);
+  const autoDesktop = fit === 'auto' && isDesktop;
+
   return (
     <div
       className="cardcar"
@@ -80,15 +102,32 @@ const CardCarousel: React.FunctionComponent<CardCarouselProps> = ({
             alt=""
             loading="lazy"
             decoding="async"
-            style={{
-              flex: '0 0 100%',
-              width: '100%',
-              height: '100%',
-              objectFit: fit,
-              padding: fit === 'contain' && padded ? '5% 6%' : 0,
-              boxSizing: 'border-box',
-              background: '#fff',
-            }}
+            style={
+              autoDesktop
+                ? {
+                    // width-anchored: always fills the box's full width (no left/right gap,
+                    // ever); height is 'auto' (NOT a min-height floor — that would force
+                    // object-fit:fill's default stretch/distortion on a narrower photo), so it
+                    // follows the photo's own ratio, cropped top/bottom by the box's
+                    // overflow:hidden when taller than the box, centered so the crop doesn't
+                    // favor either edge.
+                    flex: '0 0 100%',
+                    width: '100%',
+                    height: 'auto',
+                    alignSelf: 'center',
+                    boxSizing: 'border-box',
+                    background: '#fff',
+                  }
+                : {
+                    flex: '0 0 100%',
+                    width: '100%',
+                    height: '100%',
+                    objectFit: fit === 'auto' ? 'contain' : fit,
+                    padding: fit !== 'cover' && padded ? '5% 6%' : 0,
+                    boxSizing: 'border-box',
+                    background: '#fff',
+                  }
+            }
           />
         ))}
       </div>