fix(messaging-ui): portal compose modal to <body> so it renders above host chrome

A host wrapper like .view{position:relative;z-index:1} creates a stacking context that traps the modal's fixed overlay below a sibling sticky header, no matter its z-index. Render the modal through a ModalPortal (createPortal to document.body) so it escapes the host stacking context + overflow entirely; the portal root copies the SDK theme tokens from the live surface (synchronously, no unstyled paint) and carries dark defaults as a fallback. Adds react-dom peer dep. 67 tests green. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-22 18:19:25 +05:30
parent f16d7986c7
commit 9882177c59
6 changed files with 60 additions and 5 deletions
@@ -802,11 +802,23 @@
  word-break: break-word;
 }

-/* compose modal */
+/* compose modal — portaled to <body>, so carry SDK theme-token defaults here (the host's
+   own token mapping + a synchronous copy on the portal root override these). */
+.miu-portal {
+  --miu-bg: #0e0e13;
+  --miu-panel: #16161d;
+  --miu-panel-2: #1d1d26;
+  --miu-border: #262631;
+  --miu-text: #e9e9ef;
+  --miu-muted: #9a9aa7;
+  --miu-accent: #fda913;
+  --miu-accent-text: #1a1206;
+  --miu-radius: 12px;
+}
 .miu-modal-overlay {
  position: fixed;
  inset: 0;
-  z-index: 100;
+  z-index: 2147483000;
  background: rgba(2, 2, 6, 0.6);
  display: grid;
  place-items: center;