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