@bytebrand/fe-ui-core-autobahn 1.0.0 → 1.0.2

package/cards/CarRow.tsx

@@ -22,7 +22,7 @@ import React from 'react';
 import { TranslationFunction } from '../types';
 
 import { CardCarousel, IconButton, SaveChip, Button, Icon } from '../ui';
-import { EcoLine, PricePaths, PriceKauf, PriceMeter, PpActivity, DropChip, PercentChip, ZeroDownChip, fmtKm } from './cardParts';
+import { EcoLine, PricePaths, PriceKauf, PriceMeter, PpActivity, GalleryBadges, DropChip, PercentChip, ZeroDownChip, fmtKm } from './cardParts';
 import { AutobahnCar } from './types';
 
 export interface CarRowProps {
@@ -65,42 +65,46 @@ const CarRow: React.FunctionComponent<CarRowProps> = ({ car, isFavorite, onToggl
       onClick={() => onOpen(car)}
       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" />
-        {/* deal badges — ONE compact line: NEU · −€ · 0 € Anz. · −%. The price RATING
-            ('Guter Preis') is NOT here — it lives in the price column (PricePaths meter). */}
-        <div
-          style={{
-            position: 'absolute',
-            top: 10,
-            left: 10,
-            right: 10,
-            zIndex: 3,
-            display: 'flex',
-            flexDirection: 'row',
-            flexWrap: 'nowrap',
-            alignItems: 'center',
-            gap: 5,
-          }}
-        >
-          {car.isNew && <span className="neu-badge">NEU</span>}
-          {car.drop != null ? <DropChip t={t} amount={car.drop} /> : showSave && <SaveChip t={t} amount={car.savings!} />}
-          <ZeroDownChip t={t} show={car.zeroDown} compact />
-          <PercentChip pct={car.dropPct} />
-        </div>
-        <div style={{ position: 'absolute', bottom: 10, right: 10, zIndex: 3 }}>
-          <span className="imglabel">
-            <Icon name="image" size={13} />
-            {car.photos}
-          </span>
-        </div>
-        <div
-          onClick={(e) => e.stopPropagation()}
-          className="show-mobile"
-          style={{ position: 'absolute', top: 8, right: 8, zIndex: 3 }}
-        >
-          <IconButton name="heart" filled active={isFavorite} onClick={onToggleFavorite} label={t('autobahn:card.action.save')} />
+      <div className="listcard-media" onMouseEnter={onMediaEnter} onTouchStart={onMediaEnter}>
+        <div className="listcard-media-img">
+          <CardCarousel images={car.gallery} height="100%" fit="contain" />
+          {/* deal badges — ONE compact line: NEU · −€ · 0 € Anz. · −%. The price RATING
+              ('Guter Preis') is NOT here — it lives in the price column (PricePaths meter). */}
+          <div
+            style={{
+              position: 'absolute',
+              top: 10,
+              left: 10,
+              right: 10,
+              zIndex: 3,
+              display: 'flex',
+              flexDirection: 'row',
+              flexWrap: 'nowrap',
+              alignItems: 'center',
+              gap: 5,
+            }}
+          >
+            {car.isNew && <span className="neu-badge">NEU</span>}
+            {car.drop != null ? <DropChip t={t} amount={car.drop} /> : showSave && <SaveChip t={t} amount={car.savings!} />}
+            <ZeroDownChip t={t} show={car.zeroDown} compact />
+            <PercentChip pct={car.dropPct} />
+          </div>
+          <div style={{ position: 'absolute', bottom: 10, right: 10, zIndex: 3 }}>
+            <span className="imglabel">
+              <Icon name="image" size={13} />
+              {car.photos}
+            </span>
+          </div>
+          <div
+            onClick={(e) => e.stopPropagation()}
+            className="show-mobile"
+            style={{ position: 'absolute', top: 8, right: 8, zIndex: 3 }}
+          >
+            <IconButton name="heart" filled active={isFavorite} onClick={onToggleFavorite} label={t('autobahn:card.action.save')} />
+          </div>
         </div>
+        {/* activity/trust pill row — always under the image, never overlaid on it. */}
+        <GalleryBadges car={car} t={t} />
       </div>
 
       <div className="listcard-info">

package/cards/cardParts.tsx

@@ -487,3 +487,43 @@ export const PpActivity: React.FunctionComponent<PpActivityProps> = ({ car, t })
     </div>
   );
 };
+
+export interface GalleryBadgesProps {
+  car: AutobahnCar;
+  t: TranslationFunction;
+}
+
+/**
+ * Trust/activity pill row rendered under the gallery on the SRP list card — mirrors the mobile
+ * VDP gallery header (availability · views · favorites · Geprüft). Availability/views/favorites
+ * are real data and each pill is omitted when its value isn't present yet; 'Geprüft' is auto.de's
+ * general inspection/warranty promise (same claim as the legacy VDP trust strip, e.g.
+ * VehicleDetailedSliderModal/Sidebar.tsx), not per-car data, so it always renders — it exists here
+ * mainly so the row never looks empty while the async view/favorite counts are still loading.
+ */
+export const GalleryBadges: React.FunctionComponent<GalleryBadgesProps> = ({ car, t }) => (
+  <div className="gallery-badges">
+    {car.availability && (
+      <span className="gallery-pill gallery-pill--good">
+        <Icon name="circle-check" size={14} stroke={2} />
+        {car.availability}
+      </span>
+    )}
+    {car.viewsCount != null && (
+      <span className="gallery-pill">
+        <Icon name="eye" size={14} stroke={1.9} />
+        {t('autobahn:card.activity.viewsCount', { count: car.viewsCount })}
+      </span>
+    )}
+    {car.favoritesCount != null && (
+      <span className="gallery-pill">
+        <Icon name="heart" size={14} stroke={1.9} />
+        {t('autobahn:card.activity.favoritesCount', { count: car.favoritesCount })}
+      </span>
+    )}
+    <span className="gallery-pill">
+      <Icon name="shield-check" size={14} stroke={1.9} />
+      {t('autobahn:card.trust.checked')}
+    </span>
+  </div>
+);

package/cards/index.ts

@@ -22,6 +22,7 @@ export {
   PriceKauf,
   PriceMeter,
   PpActivity,
+  GalleryBadges,
 } from './cardParts';
 export type {
   SpecLineProps,
@@ -30,6 +31,7 @@ export type {
   EcoLineProps,
   PricePathsProps,
   PpActivityProps,
+  GalleryBadgesProps,
 } from './cardParts';
 
 export type { AutobahnCar, AutobahnPhev } from './types';

package/cards/types.ts

@@ -111,4 +111,12 @@ export interface AutobahnCar {
   watchers?: number;
   /** number of recent views (drives the 'vor N Std' cue). */
   views?: number;
+
+  // --- gallery activity strip (real data: UserActionsAPI 'stats/viewers', loaded async and
+  //     keyed by carId in SearchResultsStore.statsData — see fieldMapping.ts). Absent until
+  //     that fetch resolves; the gallery badge row simply omits the pill until then. ---
+  /** total detail-page views (stats totalCarImpCount) — shown as the eye pill under the image. */
+  viewsCount?: number;
+  /** total users who favorited this car (stats totalFavCount) — shown as the heart pill under the image. */
+  favoritesCount?: number;
 }

package/data/fieldMapping.ts

@@ -328,6 +328,28 @@ export const FIELD_MAPPINGS: readonly FieldMapping[] = [
     confirmedAt: 'as watchers (searchStore.statsData, separate from the store car)',
     notes: 'Recent-views cue. Same as watchers — not synthesized.',
   },
+
+  // ------------------------------------------- gallery activity strip (WIRED, AB-P0-9)
+  {
+    field: 'viewsCount',
+    required: false,
+    status: 'wired-optional',
+    source: 'deps.stats.totalCarImpCount ← searchStore.statsData.get(id) (UserActionsAPI stats/viewers)',
+    transform: 'number passthrough; emitted only once the async stats fetch resolves for this car',
+    confirmedAt:
+      'SearchResultsStore.ts:211-232 (getStatsDataByIds/getStatsData already fetched by SearchNextPage.runSearch, getStats=true) · UserActionsAPI.ts:97-98 (stats/viewers) · withStats.tsx:11 (IStatsData.totalCarImpCount, same endpoint already rendered on the legacy card)',
+    notes:
+      'Distinct from `views` on purpose: `views` feeds PpActivity’s fabricated "vor N Std" cue (car.views % 6) — reusing it here would have silently turned that dormant text on everywhere. viewsCount only drives the new gallery eye pill.',
+  },
+  {
+    field: 'favoritesCount',
+    required: false,
+    status: 'wired-optional',
+    source: 'deps.stats.totalFavCount ← searchStore.statsData.get(id) (UserActionsAPI stats/viewers)',
+    transform: 'number passthrough; emitted only once the async stats fetch resolves for this car',
+    confirmedAt: 'same source as viewsCount · withStats.tsx:11 (IStatsData.totalFavCount)',
+    notes: 'Distinct from `watchers` for the same reason as viewsCount (keeps PpActivity untouched).',
+  },
 ] as const;
 
 /** Quick lookups for tooling / tests. */

package/data/toAutobahnCar.ts

@@ -69,6 +69,13 @@ export interface ToAutobahnCarDeps {
   language?: string;
   /** placeholder image URL override (defaults to PLACEHOLDER_IMAGE). */
   placeholder?: string;
+  /**
+   * Buyer-activity stats for this car — UserActionsAPI 'stats/viewers' response, loaded async and
+   * keyed by carId (`searchStore.statsData.get(storeCar.id)`). Pass it straight through; absent
+   * (not loaded yet, or no stats for this car) → viewsCount/favoritesCount stay undefined and the
+   * gallery badge row simply omits those pills. Never fabricated.
+   */
+  stats?: { totalCarImpCount?: number; totalFavCount?: number };
 }
 
 // ---------------------------------------------------------------------------
@@ -383,6 +390,10 @@ export function toAutobahnCar(storeCar: any, deps: ToAutobahnCarDeps = {}): Auto
   // 0 € Anzahlung available — transform sets offer.showDownPayment = (raw showDownPayment && zero first installment).
   const zeroDown = !!offer.showDownPayment;
 
+  // --- gallery activity strip (REAL) — UserActionsAPI 'stats/viewers', injected via deps.stats. ---
+  const viewsCount = num(deps.stats?.totalCarImpCount);
+  const favoritesCount = num(deps.stats?.totalFavCount);
+
   const carView: AutobahnCar = {
     // identity / headline
     make: String(title.make ?? ''),
@@ -431,6 +442,8 @@ export function toAutobahnCar(storeCar: any, deps: ToAutobahnCarDeps = {}): Auto
     ...(zeroDown ? { zeroDown } : {}),
     ...(isNew ? { isNew } : {}),
     ...(availability ? { availability } : {}),
+    ...(viewsCount != null ? { viewsCount } : {}),
+    ...(favoritesCount != null ? { favoritesCount } : {}),
 
     // NEEDS-DATA: deliberately omitted (marketLow, marketAvg, marketHigh, watchers, views).
     // The cards render 'Daten folgt' for these until a real backend exists.

package/locales/de/autobahn.json

@@ -33,7 +33,12 @@
     },
     "activity": {
       "watchers": "{{watchers}} Interessent · vor {{hrs}} Std",
-      "watchers_plural": "{{watchers}} Interessenten · vor {{hrs}} Std"
+      "watchers_plural": "{{watchers}} Interessenten · vor {{hrs}} Std",
+      "viewsCount": "{{count}}x",
+      "favoritesCount": "{{count}}x"
+    },
+    "trust": {
+      "checked": "Geprüft"
     },
     "specs": {
       "firstRegistration": "EZ {{reg}}",

package/locales/en/autobahn.json

@@ -33,7 +33,12 @@
     },
     "activity": {
       "watchers": "{{watchers}} interested · {{hrs}} hours ago",
-      "watchers_plural": "{{watchers}} interested · {{hrs}} hours ago"
+      "watchers_plural": "{{watchers}} interested · {{hrs}} hours ago",
+      "viewsCount": "{{count}}x",
+      "favoritesCount": "{{count}}x"
+    },
+    "trust": {
+      "checked": "Checked"
     },
     "specs": {
       "firstRegistration": "Reg. {{reg}}",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "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

@@ -1002,7 +1002,17 @@
 
 /* horizontal listing card (SRP): image | info | price */
 .md3 .listcard { display: grid; grid-template-columns: 300px 1fr 240px; align-items: stretch; }
-.md3 .listcard-media { position: relative; min-height: 100%; }
+.md3 .listcard-media { position: relative; min-height: 100%; display: flex; flex-direction: column; }
+/* wraps the carousel + its absolute overlays; flexes to fill whatever height the badge row below
+   doesn't need, so the row height stays governed by the grid (like before this row existed). */
+.md3 .listcard-media-img { position: relative; flex: 1 1 auto; min-height: 0; }
+/* activity/trust pill row under the SRP card image (availability · views · favorites · Geprüft) */
+.md3 .gallery-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px;
+  border-top: 1px solid var(--md-outline-variant); background: var(--md-sc-lowest); flex: none; }
+.md3 .gallery-pill { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px;
+  border-radius: var(--md-r-full); border: 1px solid var(--md-outline-variant); background: var(--md-sc-lowest);
+  color: var(--md-on-surface); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
+.md3 .gallery-pill--good { color: var(--md-good); border-color: var(--md-good); }
 .md3 .listcard-info  { padding: 16px 18px; display: flex; flex-direction: column; gap: 11px; min-width: 0; }
 .md3 .listcard-price { position: relative; padding: 16px 18px; border-left: 1px solid var(--md-outline-variant);
   display: flex; flex-direction: column; justify-content: flex-start; gap: 16px; background: var(--md-sc-low); }
@@ -1288,9 +1298,10 @@
 
 @media (max-width: 600px) {
   .md3 .cards-3, .md3 .cards-2 { grid-template-columns: 1fr; }
-  /* listing card stacks: image (4:3) → info → price */
+  /* listing card stacks: image (4:3) → badges → info → price */
   .md3 .listcard { grid-template-columns: 1fr; }
-  .md3 .listcard-media { aspect-ratio: 4 / 3; min-height: 0; }
+  .md3 .listcard-media { min-height: 0; }
+  .md3 .listcard-media-img { aspect-ratio: 4 / 3; flex: none; }
   .md3 .listcard-price { border-left: 0; border-top: 1px solid var(--md-outline-variant); padding: 14px 16px;
     flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 14px; }
   .md3 .listcard-price .pricepaths { flex: none; min-width: 0; }

package/vdp/VdpViewer.tsx

@@ -10,12 +10,25 @@
 // inputs are props + callbacks. The keyboard / scroll-lock effect touches the
 // document the way any focus-trapping modal must — there is no store / API /
 // data access. Renders correctly only inside a `<div className="md3">` subtree.
+//
+// PORTAL: rendered into document.body (re-wrapped in its own `.md3` scope for the
+// --md-* custom properties, which are only defined under `.md3`) instead of in
+// place. The app root (`App.styl` `.app`) sets `overflow: clip`, which on several
+// mobile browsers (notably iOS Safari) clips `position: fixed` descendants to the
+// ancestor's box instead of the true viewport — the TopBar stayed visible above
+// this "fullscreen" overlay and the header row (counter + actions) was pushed out
+// of the clipped area. A portal to `document.body` escapes that ancestor entirely.
 
 import React, { useEffect, useRef, useState } from 'react';
+import * as ReactDOM from 'react-dom';
 import { TranslationFunction } from '../types';
 
 import { Icon, IconButton } from '../ui';
 
+const ZOOM_MIN = 1;
+const ZOOM_MAX = 3;
+const ZOOM_STEP = 0.5;
+
 export interface VdpViewerProps {
   /** ready-to-use image URLs (already resolved by the caller). */
   images: string[];
@@ -25,13 +38,24 @@ export interface VdpViewerProps {
   onClose: () => void;
   /** i18n function (drilled from the page). */
   t: TranslationFunction;
+  /** sales phone number shown/dialled by the call action — omit to hide it. */
+  phone?: string;
+  /** call action (tel: link owned by the caller) — omit to hide the call button. */
+  onCall?: () => void;
+  /** "request this car" action (mirrors the legacy slider's envelope button) — omit to hide. */
+  onEmail?: () => void;
 }
 
-const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0, onClose, t }) => {
+const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0, onClose, t, phone, onCall, onEmail }) => {
   const [i, setI] = useState(start);
+  const [zoom, setZoom] = useState(ZOOM_MIN);
   const n = images.length;
   const go = (d: number) => setI((p) => (p + d + n) % n);
 
+  // Reset zoom on every slide change — a lingering zoom level from the previous photo reads as
+  // a stuck/broken control on the new one.
+  useEffect(() => setZoom(ZOOM_MIN), [i]);
+
   // Keyboard nav + scroll lock while the overlay is mounted. `go`/`onClose` are
   // read from refs so the listener stays stable for the lifetime of the viewer.
   const goRef = useRef(go);
@@ -54,86 +78,132 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
   }, []);
 
   const tx = useRef<number | null>(null);
-  return (
-    <div
-      style={{
-        position: 'fixed',
-        inset: 0,
-        zIndex: 200,
-        background: 'var(--md-surface)',
-        display: 'flex',
-        flexDirection: 'column',
-      }}
-      onTouchStart={(e) => {
-        tx.current = e.touches[0].clientX;
-      }}
-      onTouchEnd={(e) => {
-        if (tx.current == null) return;
-        const dx = e.changedTouches[0].clientX - tx.current;
-        tx.current = null;
-        if (Math.abs(dx) > 40) go(dx > 0 ? -1 : 1);
-      }}
-    >
+  const zoomOut = () => setZoom((z) => Math.max(ZOOM_MIN, +(z - ZOOM_STEP).toFixed(2)));
+  const zoomIn = () => setZoom((z) => Math.min(ZOOM_MAX, +(z + ZOOM_STEP).toFixed(2)));
+
+  const iconBtnStyle: React.CSSProperties = { background: 'var(--md-sc-lowest, #fff)', boxShadow: 'var(--md-e1)' };
+  const contactBtnStyle: React.CSSProperties = { background: 'var(--md-primary)', boxShadow: 'var(--md-e1)' };
+
+  const overlay = (
+    <div className="md3">
       <div
         style={{
+          position: 'fixed',
+          inset: 0,
+          zIndex: 200,
+          background: 'var(--md-surface)',
           display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          padding: '12px 16px',
-          borderBottom: '1px solid var(--md-outline-variant)',
+          flexDirection: 'column',
+        }}
+        onTouchStart={(e) => {
+          tx.current = e.touches[0].clientX;
+        }}
+        onTouchEnd={(e) => {
+          if (tx.current == null) return;
+          const dx = e.changedTouches[0].clientX - tx.current;
+          tx.current = null;
+          if (Math.abs(dx) > 40) go(dx > 0 ? -1 : 1);
         }}
       >
-        <span className="num md-title-sm">
-          {i + 1} / {n}
-        </span>
-        <IconButton name="x" filled label={t('autobahn:viewer.closeLabel')} onClick={onClose} />
-      </div>
-      <div style={{ flex: 1, position: 'relative', minHeight: 0, background: '#fff' }}>
-        <img
-          src={images[i]}
-          alt=""
-          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'contain' }}
-        />
-        <button
-          className="car-arrow car-arrow--l hide-mobile"
-          style={{ opacity: 1 }}
-          aria-label={t('autobahn:viewer.previousLabel')}
-          onClick={() => go(-1)}
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: 8,
+            padding: '12px 16px',
+            borderBottom: '1px solid var(--md-outline-variant)',
+            flexWrap: 'wrap',
+          }}
         >
-          <Icon name="chevron-left" size={22} />
-        </button>
-        <button
-          className="car-arrow car-arrow--r hide-mobile"
-          style={{ opacity: 1 }}
-          aria-label={t('autobahn:viewer.nextLabel')}
-          onClick={() => go(1)}
-        >
-          <Icon name="chevron-right" size={22} />
-        </button>
-      </div>
-      <div style={{ display: 'flex', justifyContent: 'center', gap: 8, padding: '12px 16px', flexWrap: 'wrap' }}>
-        {images.map((src, k) => (
-          <button
-            key={k}
-            onClick={() => setI(k)}
-            aria-label={t('autobahn:viewer.thumbnailLabel', { number: k + 1 })}
+          <span className="num md-title-sm">
+            {i + 1} / {n}
+          </span>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+            <IconButton
+              name="minus"
+              label={t('autobahn:viewer.zoomOutLabel')}
+              onClick={zoomOut}
+              style={{ ...iconBtnStyle, opacity: zoom === ZOOM_MIN ? 0.4 : 1 }}
+            />
+            <IconButton
+              name="plus"
+              label={t('autobahn:viewer.zoomInLabel')}
+              onClick={zoomIn}
+              style={{ ...iconBtnStyle, opacity: zoom === ZOOM_MAX ? 0.4 : 1 }}
+            />
+            {onEmail && (
+              <IconButton name="mail" label={t('autobahn:viewer.emailLabel')} onClick={onEmail} style={contactBtnStyle} color="#fff" />
+            )}
+            {onCall && (
+              <IconButton
+                name="phone"
+                label={t('autobahn:viewer.callLabel', { phone })}
+                onClick={onCall}
+                style={contactBtnStyle}
+                color="#fff"
+              />
+            )}
+            <IconButton name="x" filled label={t('autobahn:viewer.closeLabel')} onClick={onClose} />
+          </div>
+        </div>
+        <div style={{ flex: 1, position: 'relative', minHeight: 0, background: '#fff', overflow: 'hidden' }}>
+          <img
+            src={images[i]}
+            alt=""
             style={{
-              width: 64,
-              height: 44,
-              padding: 0,
-              borderRadius: 'var(--md-r-sm)',
-              overflow: 'hidden',
-              cursor: 'pointer',
-              border: k === i ? '2px solid var(--md-primary)' : '1px solid var(--md-outline-variant)',
-              background: '#fff',
+              position: 'absolute',
+              inset: 0,
+              width: '100%',
+              height: '100%',
+              objectFit: 'contain',
+              transform: `scale(${zoom})`,
+              transition: 'transform var(--dur-2, 200ms) var(--ease-standard, ease)',
             }}
+          />
+          <button
+            className="car-arrow car-arrow--l hide-mobile"
+            style={{ opacity: 1 }}
+            aria-label={t('autobahn:viewer.previousLabel')}
+            onClick={() => go(-1)}
           >
-            <img src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+            <Icon name="chevron-left" size={22} />
           </button>
-        ))}
+          <button
+            className="car-arrow car-arrow--r hide-mobile"
+            style={{ opacity: 1 }}
+            aria-label={t('autobahn:viewer.nextLabel')}
+            onClick={() => go(1)}
+          >
+            <Icon name="chevron-right" size={22} />
+          </button>
+        </div>
+        <div style={{ display: 'flex', justifyContent: 'center', gap: 8, padding: '12px 16px', flexWrap: 'wrap' }}>
+          {images.map((src, k) => (
+            <button
+              key={k}
+              onClick={() => setI(k)}
+              aria-label={t('autobahn:viewer.thumbnailLabel', { number: k + 1 })}
+              style={{
+                width: 64,
+                height: 44,
+                padding: 0,
+                borderRadius: 'var(--md-r-sm)',
+                overflow: 'hidden',
+                cursor: 'pointer',
+                border: k === i ? '2px solid var(--md-primary)' : '1px solid var(--md-outline-variant)',
+                background: '#fff',
+              }}
+            >
+              <img src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+            </button>
+          ))}
+        </div>
       </div>
     </div>
   );
+
+  return typeof document !== 'undefined' ? ReactDOM.createPortal(overlay, document.body) : overlay;
 };
 
 export default VdpViewer;