@bytebrand/fe-ui-core-autobahn 1.0.93 → 1.0.94

package/compat/CookieModal/Modal.tsx

@@ -2,8 +2,18 @@
 // BaseModalWrapper is replaced by a plain fixed overlay + centered surface.
 // Deliberately NOT the kit ui/Modal — the cookie consent dialog has no title
 // bar / close button and must not be dismissible without a choice.
+//
+// Rendered via ReactDOM.createPortal into document.body (same technique as
+// ui/Modal.tsx) rather than inline in the page tree: a React hydration-mismatch
+// error ANYWHERE else on the page (a known, separate bug — see the
+// SearchNextPage isMobile SSR/CSR mismatch) can corrupt sibling reconciliation
+// enough that an inline `position: fixed` overlay ends up mounted in the wrong
+// place in the DOM (observed: appearing as plain content below the footer
+// instead of as an overlay). A body-level portal is immune to that — its DOM
+// node never lives inside the page's own React subtree.
 
 import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 
 import ModalsConfig from './ModalsConfig';
 
@@ -30,13 +40,19 @@ const SURFACE: React.CSSProperties = {
 };
 
 const BasicModal = ({ isVisible, toggleModal, name, modalProps, handleSentryInit }: IBasicModal) => {
-  if (!isVisible) return null;
-  return (
-    <div style={OVERLAY} role='dialog' aria-modal='true' aria-label='Cookie-Einstellungen'>
-      <div style={SURFACE}>
-        {ModalsConfig[name] && ModalsConfig[name]({ ...modalProps, toggleModal, handleSentryInit })}
+  if (!isVisible || typeof document === 'undefined') return null;
+  return ReactDOM.createPortal(
+    // wrapped in .md3: autobahn.css scopes every token/utility class (incl.
+    // .mbtn used by the modal buttons) under `.md3` and intentionally does
+    // nothing outside it — a bare document.body portal loses the theme.
+    <div className='md3'>
+      <div style={OVERLAY} role='dialog' aria-modal='true' aria-label='Cookie-Einstellungen'>
+        <div style={SURFACE}>
+          {ModalsConfig[name] && ModalsConfig[name]({ ...modalProps, toggleModal, handleSentryInit })}
+        </div>
       </div>
-    </div>
+    </div>,
+    document.body
   );
 };
 

package/locales/de/autobahn.json

@@ -85,7 +85,7 @@
     "priceRatingAria": "Preisbewertung: {{rating}}",
     "detailsShow": "Details anzeigen",
     "paymentLabel": "Zahlung",
-    "paymentValue": "Überweisung oder bei Übergabe",
+    "paymentValue": "Zahlung per Überweisung",
     "warrantyLabel": "Garantie",
     "warrantyValue": "1 Jahr inklusive",
     "deliveryLabel": "Lieferung",
@@ -771,7 +771,7 @@
     },
     "step3": {
       "title": "Bezahlung",
-      "description": "Sicher online bezahlen oder bei der Übergabe — ohne versteckte Kosten."
+      "description": "Sicher per Überweisung bezahlen — ohne versteckte Kosten."
     },
     "step4": {
       "title": "Übergabe",

package/locales/en/autobahn.json

@@ -85,7 +85,7 @@
     "priceRatingAria": "Price rating: {{rating}}",
     "detailsShow": "Show details",
     "paymentLabel": "Payment",
-    "paymentValue": "Bank transfer or on handover",
+    "paymentValue": "Bank transfer",
     "warrantyLabel": "Warranty",
     "warrantyValue": "1 year included",
     "deliveryLabel": "Delivery",
@@ -771,7 +771,7 @@
     },
     "step3": {
       "title": "Payment",
-      "description": "Pay securely online or on handover — with no hidden costs."
+      "description": "Pay securely by bank transfer — with no hidden costs."
     },
     "step4": {
       "title": "Handover",

package/package.json

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