🐛(frontend) fix scroll table of content

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.

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={

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);