From 2be5cda88e4ab17ef3aabfeb24f362a100d8db49 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Wed, 7 Jan 2026 11:24:40 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=B1(frontend)=20toolbar=20to=20the=20b?=
 =?UTF-8?q?ottom=20when=20mobile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On mobile devices, the mobile toolbar is often
positioned above the Blocknote toolbar, making
it hard to access.
This commit adjusts the toolbar position to
the bottom of the screen for better accessibility
when using mobile devices.
---
 CHANGELOG.md                                  |  1 +
 .../BlockNoteToolBar/BlockNoteToolbar.tsx     | 56 ++++++++++++++++++-
 .../BlockNoteToolBar/MarkdownButton.tsx       |  4 +-
 .../src/features/docs/doc-editor/styles.tsx   |  3 +
 4 files changed, 62 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 10c64acb..9651d499 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,7 @@ and this project adheres to
 - 🥅(frontend) intercept 401 error on GET threads #1754
 - 🦺(frontend) check content type pdf on PdfBlock #1756
 - ✈️(frontend) pause Posthog when offline #1755
+- 📱(frontend) toolbar to the bottom when mobile #1774
 
 ### Fixed
 
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/BlockNoteToolbar.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/BlockNoteToolbar.tsx
index b88e09c7..4fa98db9 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/BlockNoteToolbar.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/BlockNoteToolbar.tsx
@@ -1,15 +1,26 @@
+import { FormattingToolbarExtension } from '@blocknote/core/extensions';
 import {
+  ExperimentalMobileFormattingToolbarController,
   FormattingToolbar,
   FormattingToolbarController,
   blockTypeSelectItems,
   getFormattingToolbarItems,
+  useBlockNoteEditor,
   useDictionary,
+  useExtensionState,
 } from '@blocknote/react';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { Box } from '@/components';
 import { useConfig } from '@/core/config/api';
+import { useResponsiveStore } from '@/stores';
 
+import {
+  DocsBlockSchema,
+  DocsInlineContentSchema,
+  DocsStyleSchema,
+} from '../../types';
 import { CommentToolbarButton } from '../comments/CommentToolbarButton';
 import { getCalloutFormattingToolbarItems } from '../custom-blocks';
 
@@ -24,6 +35,7 @@ export const BlockNoteToolbar = () => {
   const [onConfirm, setOnConfirm] = useState<() => void | Promise<void>>();
   const { t } = useTranslation();
   const { data: conf } = useConfig();
+  const { isMobile, isTablet } = useResponsiveStore();
 
   const toolbarItems = useMemo(() => {
     let toolbarItems = getFormattingToolbarItems([
@@ -84,7 +96,13 @@ export const BlockNoteToolbar = () => {
 
   return (
     <>
-      <FormattingToolbarController formattingToolbar={formattingToolbar} />
+      {isMobile || isTablet ? (
+        <MobileFormattingToolbarController
+          formattingToolbar={formattingToolbar}
+        />
+      ) : (
+        <FormattingToolbarController formattingToolbar={formattingToolbar} />
+      )}
       {confirmOpen && (
         <ModalConfirmDownloadUnsafe
           onClose={() => setIsConfirmOpen(false)}
@@ -94,3 +112,39 @@ export const BlockNoteToolbar = () => {
     </>
   );
 };
+
+const MobileFormattingToolbarController = ({
+  formattingToolbar,
+}: {
+  formattingToolbar: () => React.ReactNode;
+}) => {
+  const editor = useBlockNoteEditor<
+    DocsBlockSchema,
+    DocsInlineContentSchema,
+    DocsStyleSchema
+  >();
+  const show = useExtensionState(FormattingToolbarExtension, {
+    editor,
+  });
+
+  if (!show) {
+    return null;
+  }
+
+  return (
+    <Box
+      $margin="auto"
+      $position="absolute"
+      $css={`
+        & > div {
+        left: 50%;
+        transform: translate(0px, 0px) scale(1) translateX(-50%)!important;
+      }
+    `}
+    >
+      <ExperimentalMobileFormattingToolbarController
+        formattingToolbar={formattingToolbar}
+      />
+    </Box>
+  );
+};
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/MarkdownButton.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/MarkdownButton.tsx
index 753e7b29..87935246 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/MarkdownButton.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteToolBar/MarkdownButton.tsx
@@ -74,7 +74,9 @@ export function MarkdownButton() {
   };
 
   const show = useMemo(() => {
-    return !!selectedBlocks.find((block) => block.content !== undefined);
+    return (
+      selectedBlocks.filter((block) => block.content !== undefined).length !== 0
+    );
   }, [selectedBlocks]);
 
   if (!show || !editor.isEditable || !Components) {
diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx
index 6c9c1645..fa94cdcd 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx
@@ -180,6 +180,9 @@ export const cssEditor = css`
     & .bn-editor {
       padding-right: 36px;
     }
+    & .bn-toolbar {
+      max-width: 100vw;
+    }
   }
 
   @media screen and (width <= 560px) {