fix(ribbon): content languages modal hidden behind backdrop

This commit is contained in:
Elian Doran 2025-12-10 22:52:13 +02:00
parent ab1b4b37f4
commit 0f867e02c4
No known key found for this signature in database

View File

@ -22,6 +22,7 @@ import { CodeMimeTypesList } from "../type_widgets/options/code_notes";
import { ContentLanguagesList } from "../type_widgets/options/i18n"; import { ContentLanguagesList } from "../type_widgets/options/i18n";
import { LocaleSelector } from "../type_widgets/options/components/LocaleSelector"; import { LocaleSelector } from "../type_widgets/options/components/LocaleSelector";
import { isExperimentalFeatureEnabled } from "../../services/experimental_features"; import { isExperimentalFeatureEnabled } from "../../services/experimental_features";
import { createPortal } from "preact/compat";
const isNewLayout = isExperimentalFeatureEnabled("new-layout"); const isNewLayout = isExperimentalFeatureEnabled("new-layout");
@ -348,18 +349,27 @@ export function NoteLanguageSelector({ note }: { note?: FNote | null }) {
>{t("note_language.configure-languages")}</FormListItem> >{t("note_language.configure-languages")}</FormListItem>
)} )}
/> />
<Modal {createPortal(
className="content-languages-modal" <ContentLanguagesModal modalShown={modalShown} setModalShown={setModalShown} />,
title={t("content_language.title")} document.body
show={modalShown} onHidden={() => setModalShown(false)} )}
size="lg" scrollable
>
<ContentLanguagesList />
</Modal>
</> </>
); );
} }
function ContentLanguagesModal({ modalShown, setModalShown }: { modalShown: boolean, setModalShown: (shown: boolean) => void }) {
return (
<Modal
className="content-languages-modal"
title={t("content_language.title")}
show={modalShown} onHidden={() => setModalShown(false)}
size="lg" scrollable
>
<ContentLanguagesList />
</Modal>
);
}
function findTypeTitle(type?: NoteType, mime?: string | null) { function findTypeTitle(type?: NoteType, mime?: string | null) {
if (type === "code") { if (type === "code") {
const mimeTypes = mime_types.getMimeTypes(); const mimeTypes = mime_types.getMimeTypes();