@bytebrand/fe-ui-core-autobahn 1.0.142 → 1.0.143

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core-autobahn",
-  "version": "1.0.142",
+  "version": "1.0.143",
   "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/vdp/VdpModules.tsx

@@ -2226,17 +2226,23 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
   const desktopBreakdownRef = React.useRef<HTMLDivElement | null>(null);
   const mobileBreakdownRef = React.useRef<HTMLDivElement | null>(null);
   // mobile (ADV-276): revealing the breakdown scrolls the sheet body until the "Repräsentatives
-  // Beispiel" headline sits at its top — not all the way down to the CTA row under the breakdown.
+  // Beispiel" headline sits at its top — but never so far that the CTA row under the breakdown
+  // comes into view (on tall screens the breakdown is shorter than the sheet, so the headline
+  // then stops lower, with the bottom CTA row still just below the fold).
   // The sheet keeps its fixed height (see .fin-modal in md3.css), so nothing jumps; only the
   // body scrolls. Hand-rolled rAF ease-out so the duration is ours, not the browser's.
+  const mobileBottomCtaRef = React.useRef<HTMLDivElement | null>(null);
   const breakdownScrollRaf = React.useRef(0);
   const scrollSheetToBreakdown = React.useCallback((): void => {
     const el = mobileBreakdownRef.current;
     const body = el?.closest('.fin-modal-body') as HTMLElement | null | undefined;
     if (!el || !body) return;
     const from = body.scrollTop;
-    const headlineTop = el.getBoundingClientRect().top - body.getBoundingClientRect().top + from;
-    const to = Math.max(0, Math.min(headlineTop - 8, body.scrollHeight - body.clientHeight));
+    const bodyTop = body.getBoundingClientRect().top;
+    const headlineTop = el.getBoundingClientRect().top - bodyTop + from;
+    const cta = mobileBottomCtaRef.current;
+    const ctaLimit = cta ? cta.getBoundingClientRect().top - bodyTop + from - body.clientHeight : Infinity;
+    const to = Math.max(0, Math.min(headlineTop - 8, ctaLimit, body.scrollHeight - body.clientHeight));
     if (to === from) return;
     window.cancelAnimationFrame(breakdownScrollRaf.current);
     const duration = 400;
@@ -3687,7 +3693,7 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                         </p>
                       </>
                     )}
-                    <div className="fin-sheet-cta-row" style={{ display: 'flex', gap: 7, paddingBottom: 15 }}>
+                    <div ref={mobileBottomCtaRef} className="fin-sheet-cta-row" style={{ display: 'flex', gap: 7, paddingBottom: 15 }}>
                       <Button
                         variant="filled"
                         size="lg"