fix: sticky position of toc sidebar

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

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

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>

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

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} />
   }