diff --git a/CHANGELOG.md b/CHANGELOG.md index 7872a23af..96645ef22 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -46,6 +46,8 @@ and this project adheres to - 🐛(frontend) fix overlapping placeholders in multi-column layout #1455 - 🐛(backend) filter invitation with case insensitive email - 🐛(frontend) reduce no access image size from 450 to 300 #1463 +- 🐛(frontend) force emoji picker to fixed position to stay visible on zoom #1466 + ## [3.7.0] - 2025-09-12 diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx index 68d7c269c..d250765fb 100644 --- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx +++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx @@ -13,6 +13,7 @@ import { useCreateBlockNote } from '@blocknote/react'; import { HocuspocusProvider } from '@hocuspocus/provider'; import { useEffect } from 'react'; import { useTranslation } from 'react-i18next'; +import { createGlobalStyle } from 'styled-components'; import * as Y from 'yjs'; import { Box, TextErrors } from '@/components'; @@ -49,6 +50,16 @@ import XLMultiColumn from './xl-multi-column'; const multiColumnLocales = XLMultiColumn?.locales; const withMultiColumn = XLMultiColumn?.withMultiColumn; +/* + * Force position:fixed on emoji picker to prevent it from being hidden under the left sidebar + * when zooming in/out. Without this, the picker's position could end up under the left sidebar. + */ +const BlockNoteEmojiPickerStyle = createGlobalStyle` + div[data-floating-ui-focusable]:has(.bn-grid-suggestion-menu) { + position: fixed !important; + } +`; + const baseBlockNoteSchema = withPageBreak( BlockNoteSchema.create({ blockSpecs: { @@ -177,33 +188,36 @@ export const BlockNoteEditor = ({ doc, provider }: BlockNoteEditorProps) => { }, [setEditor, editor]); return ( - - {errorAttachment && ( - - - - )} - - + + - - - - + {errorAttachment && ( + + + + )} + + + + + + + ); };