From 927193e4b9bfdbc60d35eb42dab616c7865b20e0 Mon Sep 17 00:00:00 2001
From: Tilman Vatteroth <git@tilmanvatteroth.de>
Date: Thu, 20 Apr 2023 20:13:19 +0200
Subject: [PATCH] fix: sticky position of toc sidebar

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
---
 frontend/global-styles/index.scss                    | 12 ------------
 .../renderers/document/document-toc-sidebar.tsx      |  2 +-
 .../renderers/document/markdown-document.module.scss |  3 +++
 .../document/width-based-table-of-contents.tsx       |  2 +-
 4 files changed, 5 insertions(+), 14 deletions(-)

diff --git a/frontend/global-styles/index.scss b/frontend/global-styles/index.scss
index 2eb5ddd00..fd7a97863 100644
--- a/frontend/global-styles/index.scss
+++ b/frontend/global-styles/index.scss
@@ -30,18 +30,6 @@ body {
   background-color: $dark;
 }
 
-#__next {
-  height: 100vh;
-}
-
-html {
-  height: 100%;
-}
-
-body {
-  min-height: 100%;
-}
-
 *:focus {
   outline: 0 !important;
 }
diff --git a/frontend/src/components/render-page/renderers/document/document-toc-sidebar.tsx b/frontend/src/components/render-page/renderers/document/document-toc-sidebar.tsx
index 307fe1a79..34254d8e6 100644
--- a/frontend/src/components/render-page/renderers/document/document-toc-sidebar.tsx
+++ b/frontend/src/components/render-page/renderers/document/document-toc-sidebar.tsx
@@ -20,7 +20,7 @@ export const DocumentTocSidebar: React.FC<DocumentTocSidebarProps> = ({ width, b
   const [tocAst, setTocAst] = useState<TocAst>()
   useExtensionEventEmitterHandler(TableOfContentsMarkdownExtension.EVENT_NAME, setTocAst)
   return (
-    <div className={`${styles['markdown-document-side']} pt-4`}>
+    <div className={styles['markdown-document-side']}>
       <ShowIf condition={!!tocAst}>
         <WidthBasedTableOfContents tocAst={tocAst as TocAst} baseUrl={baseUrl} width={width} />
       </ShowIf>
diff --git a/frontend/src/components/render-page/renderers/document/markdown-document.module.scss b/frontend/src/components/render-page/renderers/document/markdown-document.module.scss
index 6fc7e5061..69eddadbc 100644
--- a/frontend/src/components/render-page/renderers/document/markdown-document.module.scss
+++ b/frontend/src/components/render-page/renderers/document/markdown-document.module.scss
@@ -13,6 +13,9 @@
   flex-direction: row;
 
   .markdown-document-side {
+    position: sticky;
+    top: 0;
+    bottom: 0;
     flex: 1 0 0;
   }
 
diff --git a/frontend/src/components/render-page/renderers/document/width-based-table-of-contents.tsx b/frontend/src/components/render-page/renderers/document/width-based-table-of-contents.tsx
index f8fa7e31d..0b3102ce9 100644
--- a/frontend/src/components/render-page/renderers/document/width-based-table-of-contents.tsx
+++ b/frontend/src/components/render-page/renderers/document/width-based-table-of-contents.tsx
@@ -26,7 +26,7 @@ const MAX_WIDTH_FOR_BUTTON_VISIBILITY = 1100
  */
 export const WidthBasedTableOfContents: React.FC<DocumentExternalTocProps> = ({ tocAst, width, baseUrl }) => {
   if (width >= MAX_WIDTH_FOR_BUTTON_VISIBILITY) {
-    return <TableOfContents ast={tocAst} className={'sticky'} baseUrl={baseUrl} />
+    return <TableOfContents ast={tocAst} baseUrl={baseUrl} />
   } else {
     return <TableOfContentsHoveringButton tocAst={tocAst} baseUrl={baseUrl} />
   }