@bytebrand/fe-ui-core-autobahn 1.0.113 → 1.0.114

package/vdp/VdpViewer.tsx

@@ -64,6 +64,27 @@ const MOBILE_BREAKPOINT = 860;
 /** Landscape thumbnails (Figma node 424:7566 etc.) are 68px, not portrait's 64. */
 const LS_THUMB_W = 68;
 
+/** Safe-area helpers — keep overlay controls (especially the close button) clear of the notch /
+ *  Dynamic Island / status bar (top), home indicator (bottom) and, in landscape, whichever side the
+ *  notch rotates onto. `env(safe-area-inset-*)` only resolves to anything but 0px when the page's
+ *  `<meta name="viewport">` declares `viewport-fit=cover` (see services/fe-main/app.html) — the
+ *  0px fallback inside every `env()` call here means both of these are complete no-ops (identical
+ *  to the previous hardcoded numbers) on any browser/device that has no safe area to begin with, so
+ *  there's no behavioural change for the common case, only where a notch/indicator is actually
+ *  present. Two shapes, used in different structural contexts below:
+ *   - `withInset` ADDS the inset to a design offset — for absolute-positioned controls (landscape's
+ *     floating close/logo/counter/prev-next/zoom/etc.) whose `top`/`right`/… is a gap from the edge
+ *     of the *safe* content area, which needs to grow by however much the notch/indicator eats into
+ *     the raw viewport edge.
+ *   - `atLeastInset` guarantees a MINIMUM gap instead — for padding on a bar that already paints its
+ *     own edge-to-edge background (portrait's header/bottom-CTA bar, the photosheet), where a small
+ *     or absent safe area should still leave the existing 12px breathing room, not shrink it.
+ */
+const withInset = (px: number, side: 'top' | 'right' | 'bottom' | 'left'): string =>
+  `calc(${px}px + env(safe-area-inset-${side}, 0px))`;
+const atLeastInset = (px: number, side: 'top' | 'right' | 'bottom' | 'left'): string =>
+  `max(${px}px, env(safe-area-inset-${side}, 0px))`;
+
 type Layout = 'portrait' | 'landscape' | 'desktop';
 const layoutForWidth = (w: number): Layout => (w <= PORTRAIT_MAX ? 'portrait' : w <= MOBILE_BREAKPOINT ? 'landscape' : 'desktop');
 
@@ -719,7 +740,10 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
                 display: 'flex',
                 alignItems: 'flex-start',
                 justifyContent: 'space-between',
-                padding: '12px 12px 10px',
+                // safe-area-aware: this bar sits flush against the top of the fullscreen overlay
+                // (the notch/Dynamic Island/status bar's exact territory), and its close button is
+                // the primary control the "always tappable" acceptance criterion is about.
+                padding: `${atLeastInset(12, 'top')} ${atLeastInset(12, 'right')} 10px ${atLeastInset(12, 'left')}`,
                 background: 'rgba(6,11,18,0.8)',
                 borderBottom: '1px solid rgba(255,255,255,0.12)',
               }}
@@ -730,7 +754,10 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
                 ariaLabel={t('autobahn:viewer.closeLabel')}
                 onClick={onClose}
               />
-              <div style={{ position: 'absolute', left: '50%', top: 10, transform: 'translateX(-50%)', width: 160, height: 71 }}>
+              {/* absolutely positioned (unlike its close/call siblings), so it does NOT
+                  automatically shift down with the header's safe-area padding above — needs its
+                  own top offset. */}
+              <div style={{ position: 'absolute', left: '50%', top: withInset(10, 'top'), transform: 'translateX(-50%)', width: 160, height: 71 }}>
                 <LogoMark />
               </div>
               {onCall ? (
@@ -914,7 +941,23 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
             {/* full-width bottom bar — "Jetzt Anfragen" (primary) + "Anrufen" (dark), Figma nodes
                 424:8128-8134. */}
             {(onEmail || onCall) && (
-              <div style={{ display: 'flex', gap: THUMB_GAP, padding: 12, height: 82, background: '#797979', flex: 'none' }}>
+              // safe-area-aware: last item before the true bottom edge — height is deliberately
+              // NOT fixed anymore (was 82px) so the extra bottom padding on a home-indicator device
+              // grows the bar instead of squeezing its 56px-tall buttons; `alignItems: 'center'`
+              // keeps them centered in that now-variable padding box.
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: THUMB_GAP,
+                  paddingTop: 12,
+                  paddingRight: atLeastInset(12, 'right'),
+                  paddingBottom: atLeastInset(12, 'bottom'),
+                  paddingLeft: atLeastInset(12, 'left'),
+                  background: '#797979',
+                  flex: 'none',
+                }}
+              >
                 {onEmail && (
                   <button
                     type="button"
@@ -1035,25 +1078,54 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
                 brand-blue/gradient mark (verified against its raw export), i.e. the SAME svg this
                 codebase already ships as `assets/autode-logo.svg` — reused directly, not portrait's
                 white LogoMark (landscape has no dark bar behind it to need a white variant). */}
-            <div style={{ position: 'absolute', left: 4, top: 10, width: 93, height: 42, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <div
+              style={{
+                position: 'absolute',
+                left: withInset(4, 'left'),
+                top: withInset(10, 'top'),
+                width: 93,
+                height: 42,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
               <img src={logoUrl} alt="auto.de" style={{ width: 74, height: 21.46, display: 'block' }} />
             </div>
 
             {/* counter pill — Figma node 424:9277 "Counter / BG" */}
-            <div style={lsCounterStyle} aria-label={t('autobahn:viewer.counterLabel', { current: i + 1, total: n })}>
+            <div style={{ ...lsCounterStyle, top: withInset(12, 'top') }} aria-label={t('autobahn:viewer.counterLabel', { current: i + 1, total: n })}>
               <span className="num">
                 {i + 1} | {n}
               </span>
             </div>
 
-            {/* close — Figma nodes 424:7556/7557, no caption text in this layout */}
-            <LsCircleButton icon={<IconClose />} ariaLabel={t('autobahn:viewer.closeLabel')} onClick={onClose} style={{ right: 12, top: 12 }} />
+            {/* close — Figma nodes 424:7556/7557, no caption text in this layout. Rotating the
+                phone moves the notch/Dynamic Island to whichever side is now "up" (device-relative
+                left/right, not a fixed screen side) — safe-area-aware on both axes since this sits
+                at the true top-right corner, the corner most likely to overlap it. */}
+            <LsCircleButton
+              icon={<IconClose />}
+              ariaLabel={t('autobahn:viewer.closeLabel')}
+              onClick={onClose}
+              style={{ right: withInset(12, 'right'), top: withInset(12, 'top') }}
+            />
 
             {/* prev/next — Figma nodes 424:7560/7561 and 424:7563/7564 */}
             {n > 1 && (
               <>
-                <LsCircleButton icon={<IconChevronLeft />} ariaLabel={t('autobahn:viewer.previousLabel')} onClick={() => go(-1)} style={{ left: 12, top: 126 }} />
-                <LsCircleButton icon={<IconChevronRight />} ariaLabel={t('autobahn:viewer.nextLabel')} onClick={() => go(1)} style={{ right: 12, top: 126 }} />
+                <LsCircleButton
+                  icon={<IconChevronLeft />}
+                  ariaLabel={t('autobahn:viewer.previousLabel')}
+                  onClick={() => go(-1)}
+                  style={{ left: withInset(12, 'left'), top: 126 }}
+                />
+                <LsCircleButton
+                  icon={<IconChevronRight />}
+                  ariaLabel={t('autobahn:viewer.nextLabel')}
+                  onClick={() => go(1)}
+                  style={{ right: withInset(12, 'right'), top: 126 }}
+                />
               </>
             )}
 
@@ -1062,8 +1134,8 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
             <div
               style={{
                 position: 'absolute',
-                right: 12,
-                bottom: 12,
+                right: withInset(12, 'right'),
+                bottom: withInset(12, 'bottom'),
                 width: 48,
                 height: 150,
                 borderRadius: 'var(--md-r-full)',
@@ -1126,7 +1198,20 @@ const VdpViewer: React.FunctionComponent<VdpViewerProps> = ({ images, start = 0,
                 align the way the design does, without hardcoding a container width that would break
                 across the 693-860 range. `right: 81` keeps this band clear of the zoom/360 column
                 (12 right-margin + 48 wide + the 21px gap Figma leaves before it = 81). */}
-            <div style={{ position: 'absolute', left: 12, right: 81, bottom: 12, height: 50, display: 'flex', alignItems: 'center' }}>
+            <div
+              style={{
+                position: 'absolute',
+                left: withInset(12, 'left'),
+                // 81 = 12 right-margin + 48 zoom-column width + 21 Figma gap before it; add the
+                // same right inset the zoom/360 column itself got above so this band still clears
+                // it once that column has shifted in from a notched edge.
+                right: withInset(81, 'right'),
+                bottom: withInset(12, 'bottom'),
+                height: 50,
+                display: 'flex',
+                alignItems: 'center',
+              }}
+            >
               {(() => {
                 const overflow = images.length > lsFitCount;
                 const visibleCount = overflow ? lsFitCount - 1 : images.length;