Fix staged preview modal overlay stacking (#3186)

* fix(docker): fix container startup crash due to missing OD_API_TOKEN

* fix(docker): forward OD_API_TOKEN to fix docker container boot loop

* fix(docker): enforce non-empty OD_API_TOKEN for docker-compose

* fix(deploy): automate OD_API_TOKEN generation in installer and close compose loop

* docs(readme): guide manual deployment users to configure OD_API_TOKEN

* docs(readme): align working directory paths for manual deployment instructions

* docs(readme): align working directory paths for manual deployment instructions

* docs(readme): restore git clone context for first-time users

* fix: portal staged-preview-modal to document.body to escape .composer stacking context

The .staged-preview-modal was rendered inside .composer (position:relative;
z-index:1), which created a local stacking context. The modal's z-index:1200
was scoped within .composer's context instead of the root stacking context,
preventing it from properly covering .app-chrome-header when active.

Fix by rendering the modal via createPortal to document.body, consistent
with other modals in the codebase (ConversationsMenu, FileViewer, etc.).

related issue 3154
This commit is contained in:
hahalolo 2026-05-28 16:33:35 +08:00 committed by GitHub
parent ece3d71cdd
commit a4c447eea6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -8,6 +8,7 @@ import {
useState,
type ReactNode,
} from "react";
import { createPortal } from 'react-dom';
import { useI18n, useT } from '../i18n';
import type { Dict } from '../i18n/types';
import {
@ -1904,7 +1905,7 @@ function StagedAttachments({
);
})}
</div>
{preview && previewUrl ? (
{preview && previewUrl ? createPortal(
<div
className="staged-preview-modal"
role="dialog"
@ -1929,7 +1930,8 @@ function StagedAttachments({
</div>
<img src={previewUrl} alt={preview.name} />
</div>
</div>
</div>,
document.body
) : null}
</>
);