@bytebrand/fe-ui-core-autobahn 1.0.22 → 1.0.24

package/package.json

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

@@ -1165,8 +1165,10 @@
   margin-bottom: -1px; transition: color .15s, border-color .15s; text-align: center; }
 .md3 .fin-tab.on { color: var(--md-primary); border-bottom-color: var(--md-primary); }
 .md3 .fin-tab:hover:not(.on) { color: var(--md-on-surface); }
-/* 2-col grid: left grows, right fixed 148px — pill (row 1) and bar (row 2) share a column edge, never wrap */
-.md3 .fin-price-grid { display: grid; grid-template-columns: 1fr 148px; gap: 6px 16px; align-items: center; margin-top: 8px; }
+/* 2-col grid: left grows, right fixed 148px — pill (row 1) and bar (row 2) share a column edge, never wrap.
+   minmax(0,1fr) lets the rate column SHRINK below its content (plain 1fr's min is auto, which let the
+   52px phone rate blow the whole card past the viewport). */
+.md3 .fin-price-grid { display: grid; grid-template-columns: minmax(0, 1fr) 148px; gap: 6px 16px; align-items: center; margin-top: 8px; }
 .md3 .fin-rate-main { min-width: 0; }
 /* rating pill — light tier-tinted bg, tier-colored text + icon (bg/color set inline per tier) */
 .md3 .fin-eval-pill { display: inline-flex; align-items: center; gap: 5px; padding: 6px 13px;
@@ -1303,7 +1305,10 @@
   .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. */
+  .md3 .vdp-grid       { display: flex; flex-direction: column; align-items: stretch; }
   .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,
@@ -1487,10 +1492,16 @@
 @media (max-width: 600px) {
   /* full-bleed gallery: edge-to-edge, app-like (production pattern) */
   .md3 .vdp-gallerybox { margin: 0 -24px; border-radius: 0; border: 0; box-shadow: none; }
-  /* the carousel's own overlay dots move into the below-image controls row (page-rendered) */
-  .md3 .vdp-gallerybox .cardcar-dots { display: none; }
+  /* the carousel's own overlay dots move into the below-image controls row (page-rendered;
+     the dots div carries an inline display:flex — hence !important) */
+  .md3 .vdp-gallerybox .cardcar-dots { display: none !important; }
   /* mockup hero rate is a notch bigger on phone (inline style says 48 — hence !important) */
   .md3 .fin-rate-main .num { font-size: 52px !important; letter-spacing: -1.5px !important; }
+  /* narrower rating column (figma bar is 115px) frees room for the bigger rate; let the
+     € /mtl. suffix wrap under the number instead of pushing the grid wide on 4-digit rates */
+  .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; }
 }
 
 /* ---------- save-search bar ---------- */

package/vdp/VdpModules.tsx

@@ -175,7 +175,8 @@ export interface VdpTrustRowProps {
  *  availability · view count · favorite count · "Geprüft" (every auto.de listing is
  *  130-point inspected, so this one is always shown, not conditional real data). */
 export const VdpTrustRow: React.FunctionComponent<VdpTrustRowProps> = ({ available, viewCount, favCount, t }) => (
-  <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 6, marginTop: 10 }}>
+  // one swipeable line (mockup), never a ragged second row
+  <div style={{ display: 'flex', flexWrap: 'nowrap', overflowX: 'auto', scrollbarWidth: 'none', alignItems: 'center', gap: 6, marginTop: 10 }}>
     {available && (
       <span className="vdp-trust-chip">
         <Icon name="check" size={13} stroke={2.4} color="var(--md-good)" />