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

package/cards/cardParts.tsx

@@ -710,7 +710,12 @@ export const PriceTerms: React.FunctionComponent<{
   onShowDetails?: () => void;
   t: TranslationFunction;
 }> = ({ car, mode, onOpenRateAdjust, onShowDetails, t }) => {
-  if (mode === 'buy') return null;
+  // Kaufen (buy): a cash purchase has no financing terms/details link — used to `return null`
+  // here, which collapsed .cc-terms to 0 height on that tab while Financing/Leasing rendered a
+  // real line, jumping the price row (and everything below it: rating pill, CTA row) up/down on
+  // every tab switch. Render an empty, still-present .cc-terms div instead — same fix as the VDP
+  // FinanceCalculator's .fin-cond (md3.css), which reserves its line's height the same way.
+  if (mode === 'buy') return <div className="cc-terms" />;
   const finFirstInstallment =
     car.finFirstInstallment != null ? car.finFirstInstallment.toLocaleString('de-DE') : _finFirstInstallment;
   const finMonths = car.finMonths ?? _finMonths;

package/package.json

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

@@ -5552,6 +5552,10 @@ line-height: 31px;
 .md3 .cc-terms {
   margin-top: 9px;
   margin-bottom: 10px;
+  /* Kaufen renders this div empty (cardParts.tsx's PriceTerms) — min-height keeps its line's
+     height reserved so the price row/rating pill/CTA row below don't jump up when switching to
+     that tab (an empty block's own top/bottom margins would otherwise collapse together). */
+  min-height: 14px;
   font-family: Arial, Helvetica, Arimo, sans-serif;
   font-style: normal;
   font-weight: 400;

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;
@@ -3464,11 +3470,16 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                     {isLease ? t('autobahn:modal.leasingDetails') : t('autobahn:modal.financingDetails')}
                   </span>
                 </button>
-                {/* mobile "Finanzierungsdetails" toggle reveals the same row-by-row breakdown
-                    table as desktop (breakdownRows, built once above). */}
-                {showBreakdown && (
-                  <>
-                    <div ref={mobileBreakdownRef} style={{ marginBottom: 5 }}>
+                {/* mobile "Finanzierungsdetails" toggle scrolls the sheet body down to this same
+                    row-by-row breakdown table (breakdownRows, built once above) — always
+                    rendered now, not gated behind showBreakdown, so a visitor who scrolls the
+                    sheet by hand (no tap on the toggle) reaches it too. The collapsed look on
+                    open is unaffected: .fin-modal-body's own fixed height + overflow already
+                    clip this below the fold until scrolled, exactly as when it was conditionally
+                    mounted — only the toggle's click-triggered auto-scroll (scrollSheetToBreakdown,
+                    the effect above) actually depended on showBreakdown, and still does. */}
+                <>
+                  <div ref={mobileBreakdownRef} style={{ marginBottom: 5 }}>
                       <p
                         style={{
                           fontFamily: 'Arial, Helvetica, Arimo, sans-serif',
@@ -3687,7 +3698,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"
@@ -3732,7 +3743,6 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                       />
                     </div>
                   </>
-                )}
               </>
             )}
           </div>