From af2b381097d20fa5d99d22eb2c9997b183ce3c06 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Mon, 4 May 2026 15:01:08 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(frontend)=20fix=20scroll=20table?=
 =?UTF-8?q?=20of=20content?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The scroll of the table of content was calculated
on mount of the component, so when the editor height change,
the scroll of the table of content was not updated.
We added a observer to observe the height of the
editor and update the scroll of the table of
content when the height change.
---
 .../docs/doc-editor/components/DocEditor.tsx  |  8 ++++--
 .../components/TableContent.tsx               | 28 +++++++++++++++----
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx b/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx
index 243be257a..054d2256d 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-editor/components/DocEditor.tsx
@@ -19,6 +19,8 @@ import { useResponsiveStore } from '@/stores';
 
 import { BlockNoteEditor, BlockNoteReader } from './BlockNoteEditor';
 
+const DOCS_EDITOR_CLASS = '--docs--doc-editor';
+
 interface DocEditorContainerProps {
   docHeader: React.ReactNode;
   docEditor: React.ReactNode;
@@ -39,8 +41,8 @@ export const DocEditorContainer = ({
       <Box
         $maxWidth="868px"
         $width="100%"
-        $height="100%"
-        className="--docs--doc-editor"
+        $flex="1"
+        className={DOCS_EDITOR_CLASS}
       >
         <Box
           $padding={{ horizontal: isDesktop ? '54px' : 'base' }}
@@ -130,7 +132,7 @@ export const DocEditor = ({ doc }: DocEditorProps) => {
 
   return (
     <>
-      {isDesktop && <TableContent />}
+      {isDesktop && <TableContent selector={`.${DOCS_EDITOR_CLASS}`} />}
       <DocEditorContainer
         docHeader={<DocHeader doc={doc} />}
         docEditor={
diff --git a/src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx b/src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx
index 19b1e8f0b..dcde9851d 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-table-content/components/TableContent.tsx
@@ -14,7 +14,7 @@ import { MAIN_LAYOUT_ID } from '@/layouts/conf';
 
 import { Heading } from './Heading';
 
-export const TableContent = () => {
+export const TableContent = ({ selector }: { selector: string }) => {
   const { spacingsTokens, colorsTokens } = useCunninghamTheme();
   const [containerHeight, setContainerHeight] = useState('100vh');
   const { headings } = useHeadingStore();
@@ -27,11 +27,29 @@ export const TableContent = () => {
    * Calculate container height based on the scrollable content
    */
   useEffect(() => {
-    const mainLayout = document.getElementById(MAIN_LAYOUT_ID);
-    if (mainLayout) {
-      setContainerHeight(`${mainLayout.scrollHeight}px`);
+    const layout = document.querySelector<HTMLElement>(selector);
+    if (!layout) {
+      return;
     }
-  }, []);
+
+    let timeout: ReturnType<typeof setTimeout>;
+    const updateHeight = () => {
+      clearTimeout(timeout);
+      timeout = setTimeout(() => {
+        setContainerHeight(`${layout.scrollHeight}px`);
+      }, 300);
+    };
+
+    updateHeight();
+
+    const observer = new ResizeObserver(updateHeight);
+    observer.observe(layout);
+
+    return () => {
+      clearTimeout(timeout);
+      observer.disconnect();
+    };
+  }, [selector]);
 
   const onOpen = () => {
     setIsOpen(true);