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
@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState, type FormEvent } from 'react';
+import { ModalPortal } from '../components/modal-portal';
 import { useCompose, useInbox, useMailThread } from './hooks';
 import type { InboxItem, InboxState, MailAttachment, MailPerson } from './types';

@@ -254,7 +255,8 @@ function ComposeModal({ onClose, onSent }: { onClose: () => void; onSent: () =>
  }

  return (
-    <div className="miu-modal-overlay" onMouseDown={onClose}>
+    <ModalPortal>
+      <div className="miu-modal-overlay" onMouseDown={onClose}>
      <div className="miu-modal" role="dialog" aria-modal="true" onMouseDown={(e) => e.stopPropagation()}>
        <div className="miu-modal-head">
          <span>New message</span>
@@ -320,6 +322,7 @@ function ComposeModal({ onClose, onSent }: { onClose: () => void; onSent: () =>
          <button type="button" className="miu-send" onClick={() => void send()} disabled={!canSend}>{busy ? 'Sending…' : 'Send'}</button>
        </div>
      </div>
-    </div>
+      </div>
+    </ModalPortal>
  );
 }