Merge pull request #2536 from weseek/imprv/adjust-TOC-height

Imprv/adjust toc height

src/client/js/components/TableOfContents.jsx

@@ -25,27 +25,30 @@ const TableOfContents = (props) => {
     const containerElem = document.querySelector('#revision-toc');
     const containerTop = containerElem.getBoundingClientRect().top;
 
-    // window height - revisionToc top - .system-version height
-    return window.innerHeight - containerTop - 20;
+    // window height - revisionToc top - .system-version - .grw-fab-container height
+    return window.innerHeight - containerTop - 20 - 155;
   }, []);
 
   const { tocHtml } = pageContainer.state;
 
   return (
-    <StickyStretchableScroller
-      contentsElemSelector=".revision-toc .markdownIt-TOC"
-      stickyElemSelector="#revision-toc"
-      calcViewHeightFunc={calcViewHeight}
-    >
-      <div
-        id="revision-toc-content"
-        className="revision-toc-content"
+    <>
+      {/* TODO GW-3253 add four contents */}
+      <StickyStretchableScroller
+        contentsElemSelector=".revision-toc .markdownIt-TOC"
+        stickyElemSelector="#revision-toc"
+        calcViewHeightFunc={calcViewHeight}
+      >
+        <div
+          id="revision-toc-content"
+          className="revision-toc-content"
         // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={{
+          dangerouslySetInnerHTML={{
           __html: tocHtml,
         }}
-      />
-    </StickyStretchableScroller>
+        />
+      </StickyStretchableScroller>
+    </>
   );
 
 };

src/client/styles/scss/_layout_growi.scss

@@ -23,7 +23,8 @@
 
   .revision-toc {
     position: sticky;
-    top: calc(46px + 5px);
+    // growisubnavigation + grw-navbar-boder
+    top: calc(100px + 4px);
     min-width: 100%;
     margin-top: 5px;