From 10eabd01c6dcb898067c4e4bdb895ed6e0d49ab2 Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Wed, 8 Oct 2025 13:22:37 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20force=20emoji=20picker=20?=
 =?UTF-8?q?to=20fixed=20position=20to=20stay=20visible=20on=20zoom?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

prevents it from hiding under sidebar by applying global style override

Signed-off-by: Cyril <c.gromoff@gmail.com>
---
 CHANGELOG.md                                  |  2 +
 .../doc-editor/components/BlockNoteEditor.tsx | 66 +++++++++++--------
 2 files changed, 42 insertions(+), 26 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7872a23af4..96645ef227 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 68d7c269c5..d250765fb9 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 (
-    <Box
-      $padding={{ top: 'md' }}
-      $background="white"
-      $css={cssEditor(readOnly)}
-      className="--docs--editor-container"
-    >
-      {errorAttachment && (
-        <Box $margin={{ bottom: 'big', top: 'none', horizontal: 'large' }}>
-          <TextErrors
-            causes={errorAttachment.cause}
-            canClose
-            $textAlign="left"
-          />
-        </Box>
-      )}
-
-      <BlockNoteView
-        editor={editor}
-        formattingToolbar={false}
-        slashMenu={false}
-        editable={!readOnly}
-        theme="light"
+    <>
+      <BlockNoteEmojiPickerStyle />
+      <Box
+        $padding={{ top: 'md' }}
+        $background="white"
+        $css={cssEditor(readOnly)}
+        className="--docs--editor-container"
       >
-        <BlockNoteSuggestionMenu />
-        <BlockNoteToolbar />
-      </BlockNoteView>
-    </Box>
+        {errorAttachment && (
+          <Box $margin={{ bottom: 'big', top: 'none', horizontal: 'large' }}>
+            <TextErrors
+              causes={errorAttachment.cause}
+              canClose
+              $textAlign="left"
+            />
+          </Box>
+        )}
+
+        <BlockNoteView
+          editor={editor}
+          formattingToolbar={false}
+          slashMenu={false}
+          editable={!readOnly}
+          theme="light"
+        >
+          <BlockNoteSuggestionMenu />
+          <BlockNoteToolbar />
+        </BlockNoteView>
+      </Box>
+    </>
   );
 };