mirror of
https://github.com/nexu-io/open-design.git
synced 2026-05-31 19:04:39 +07:00
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:
parent
ece3d71cdd
commit
a4c447eea6
1 changed files with 4 additions and 2 deletions
|
|
@ -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}
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue