From 368dd1adc4cb8c93f97d13998ffff301a99db14a Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 13 Apr 2026 17:05:18 +0300
Subject: [PATCH] fix(options/appearance): font modal styles are affected

---
 apps/client/src/widgets/type_widgets/options/appearance.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/options/appearance.tsx b/apps/client/src/widgets/type_widgets/options/appearance.tsx
index e40daf3101..df46afa8ee 100644
--- a/apps/client/src/widgets/type_widgets/options/appearance.tsx
+++ b/apps/client/src/widgets/type_widgets/options/appearance.tsx
@@ -2,6 +2,7 @@ import "./appearance.css";
 
 import { FontFamily, OptionNames } from "@triliumnext/commons";
 import { Fragment } from "preact";
+import { createPortal } from "preact/compat";
 import { useEffect, useState } from "preact/hooks";
 
 import zoomService from "../../../components/zoom";
@@ -410,7 +411,7 @@ interface FontPickerModalProps {
 }
 
 function FontPickerModal({ show, onHidden, title, fontFamily, fontSize, onFontFamilyChange, onFontSizeChange, getFontFamily }: FontPickerModalProps) {
-    return (
+    return createPortal(
         <Modal
             className="font-picker-modal"
             title={title}
@@ -470,7 +471,8 @@ function FontPickerModal({ show, onHidden, title, fontFamily, fontSize, onFontFa
                     </div>
                 </div>
             </div>
-        </Modal>
+        </Modal>,
+        document.body
     );
 }