@bytebrand/fe-ui-core-autobahn 1.0.23 → 1.0.25

package/package.json

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

@@ -1305,7 +1305,13 @@
   .md3 .show-tablet    { display: flex !important; }
   .md3 .srp-rail       { display: none; } /* rail is desktop-only; ≤980 uses the filter sheet */
   .md3 .srp-grid       { grid-template-columns: 1fr; }
-  .md3 .vdp-grid       { display: flex; flex-direction: column; }
+  /* stretch, not the desktop rule's align-items:start — start makes every stacked block
+     (incl. .vdp-aside + finance card) shrink-to-fit its max-content, which blows past the
+     viewport as soon as any card content (e.g. the 52px rate) prefers to be wide. min-width:0
+     on the aside is the backstop: stretch is floored by min-width:auto (= content min), and
+     the nowrap CTA buttons alone min out around 400px. */
+  .md3 .vdp-grid       { display: flex; flex-direction: column; align-items: stretch; }
+  .md3 .vdp-aside      { min-width: 0; }
   .md3 .vdp-gallery    { order: 1; }
   /* mobile-only "first screen": identity + trust row BEFORE the finance card, highlights/
      condition tiles moved AFTER it (both split out of the desktop-only VdpHeaderCard,
@@ -1499,6 +1505,12 @@
   .md3 .fin-price-grid { grid-template-columns: minmax(0, 1fr) 112px; }
   .md3 .fin-rate-main > div { flex-wrap: wrap; }
   .md3 .fin-rate-main .md-body-sm { font-size: 15px !important; font-weight: 700 !important; color: var(--md-on-surface-variant) !important; }
+  /* figma pricing-card padding is 16 (inline says 20 — hence !important); the side-by-side
+     CTAs must be allowed to SHRINK (mbtn is nowrap min-width:auto, 0-30px padding — the pair
+     alone mins out wider than the phone card) */
+  .md3 .vdp-aside > .mcard { padding: 16px !important; }
+  .md3 .fin-cta-row .mbtn { min-width: 0; padding-left: 12px; padding-right: 12px; }
+  .md3 .fin-cta-row .mbtn--outlined { padding-left: 8px; padding-right: 8px; }
 }
 
 /* ---------- save-search bar ---------- */

package/vdp/FinanceCalculator.tsx

@@ -481,7 +481,7 @@ const FinanceCalculator: React.FunctionComponent<FinanceCalculatorProps> = ({
       <div className="show-mobile" style={{ flexDirection: 'column' }}>
         {/* side-by-side CTAs — mockup ratio ~2:1, with the tiny auto.de-ID sitting
             directly under the Anrufen button (not in its own full-width row). */}
-        <div style={{ display: 'flex', gap: 10, marginTop: 14, alignItems: 'flex-start' }}>
+        <div className="fin-cta-row" style={{ display: 'flex', gap: 10, marginTop: 14, alignItems: 'flex-start' }}>
           <Button variant="filled" size="lg" icon="shield-check" style={{ flex: 2 }} onClick={onSecure}>
             {t('autobahn:finance.secureOffer')}
           </Button>