@bytebrand/fe-ui-core-autobahn 1.0.88 → 1.0.91

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/package.json

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