@bytebrand/fe-ui-core-autobahn 1.0.143 → 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.143",
+  "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

@@ -3470,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',
@@ -3738,7 +3743,6 @@ export const FinanceDetailsModal: React.FunctionComponent<FinanceDetailsModalPro
                       />
                     </div>
                   </>
-                )}
               </>
             )}
           </div>