gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-02-28 09:33:38 +01:00
Code Issues Actions 12 Packages Projects Releases Wiki Activity

fix(mobile/text): formatting toolbar doesn't go back to the right position on iOS

Browse Source
This commit is contained in:
Elian Doran 2026-02-25 20:36:37 +02:00
parent 2d989dcfe3
commit bf5caaebb5
No known key found for this signature in database
1 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
apps/client/src/widgets/type_widgets/text/mobile_editor_toolbar.tsx
View File

@ -66,14 +66,21 @@ export default function MobileEditorToolbar({ inPopupEditor }: MobileEditorToolb
} }
function usePositioningOniOS(enabled: boolean, wrapperRef: MutableRef<HTMLDivElement | null>) { function usePositioningOniOS(enabled: boolean, wrapperRef: MutableRef<HTMLDivElement | null>) {
// Capture the baseline offset (Safari nav bar height) before the keyboard opens.
const baselineOffset = useRef(window.innerHeight - (window.visualViewport?.height ?? window.innerHeight));
const adjustPosition = useCallback(() => { const adjustPosition = useCallback(() => {
if (!wrapperRef.current) return; if (!wrapperRef.current) return;
const viewport = window.visualViewport; const viewport = window.visualViewport;
if (!viewport) return; if (!viewport) return;
// Account for both viewport height and its offset within the layout viewport, // Subtract the baseline so only the keyboard's contribution remains.
// which includes the Safari dynamic address bar height and any page scroll.
const bottom = window.innerHeight - viewport.height - viewport.offsetTop; const bottom = window.innerHeight - viewport.height - viewport.offsetTop;
wrapperRef.current.style.bottom = `${Math.max(0, bottom)}px`; if (bottom - baselineOffset.current <= 0) {
// Keyboard is hidden — clear the inline style so CSS controls positioning.
wrapperRef.current.style.removeProperty("bottom");
} else {
wrapperRef.current.style.bottom = `${bottom}px`;
}
}, [ wrapperRef ]); }, [ wrapperRef ]);
useEffect(() => { useEffect(() => {