WIP: fix calcViewHeight for TableOfContents

src/client/js/components/TableOfContents.jsx

@@ -29,15 +29,30 @@ const TableOfContents = (props) => {
 
   const calcViewHeight = useCallback(() => {
     // calculate absolute top of '#revision-toc' element
+    const parentElem = document.querySelector('.grw-side-contents-container');
+    const parentBottom = parentElem.getBoundingClientRect().bottom;
     const containerElem = document.querySelector('#revision-toc');
     const containerTop = containerElem.getBoundingClientRect().top;
-
-    // window height - revisionToc top - .system-version - .grw-fab-container height - grw-side-contents-container height
-    if (isUserPage) {
-      return window.innerHeight - containerTop - 20 - 155 - 26 - 40;
-    }
-    return window.innerHeight - containerTop - 20 - 155 - 26;
-  }, [isUserPage]);
+    const containerComputedStyle = getComputedStyle(containerElem);
+    const containerPaddingTop = parseFloat(containerComputedStyle['padding-top']);
+
+    // get smaller bottom line of window height - .system-version height) and containerTop
+    const bottom = Math.min(window.innerHeight - 20, parentBottom);
+
+    console.log('calcViewHeight', {
+      windowInnerHeight: window.innerHeight,
+      parentBottom,
+      containerTop,
+      viewHeight1: bottom - containerTop,
+      viewHeight2: bottom - (containerTop + containerPaddingTop),
+    });
+
+    // if (isUserPage) {
+    //   return window.innerHeight - containerTop - 20 - 155 - 26 - 40;
+    // }
+    // bottom - revisionToc top
+    return bottom - (containerTop + containerPaddingTop);
+  }, []);
 
   const { tocHtml } = pageContainer.state;
 
@@ -56,7 +71,7 @@ const TableOfContents = (props) => {
     <>
       <StickyStretchableScroller
         contentsElemSelector=".revision-toc .markdownIt-TOC"
-        stickyElemSelector="#revision-toc"
+        stickyElemSelector=".grw-side-contents-sticky-container"
         calcViewHeightFunc={calcViewHeight}
       >
         <div

src/client/styles/scss/_layout.scss

@@ -36,11 +36,12 @@ body {
   }
 }
 
-.grw-side-contents-container {
+.grw-side-contents-sticky-container {
   position: sticky;
   // growisubnavigation + grw-navbar-boder
   top: calc(100px + 4px);
   width: 250px;
+  min-width: 250px;
   margin-top: 5px;
 }
 

src/client/styles/scss/_toc.scss

@@ -1,10 +1,10 @@
 .revision-toc {
   // to get on the Attachment row
   z-index: 1;
+  padding: 5px;
   font-size: 0.9em;
 
   .revision-toc-content {
-    padding: 10px;
     li {
       margin: 6px;
     }

src/server/views/widget/page_content.html

@@ -55,9 +55,11 @@
 </div>
 
 <div class="d-none d-lg-block d-editor-none grw-side-contents-container ml-4">
-  <div id="page-accessories" class="page-accessories"></div>
-  <div id="revision-toc" class="revision-toc sps sps--abv" data-sps-offset="123">
-    <div id="revision-toc-content" class="revision-toc-content"></div>
+  <div class="grw-side-contents-sticky-container">
+    <div id="page-accessories" class="page-accessories"></div>
+    <div id="revision-toc" class="revision-toc sps sps--abv" data-sps-offset="123">
+      <div id="revision-toc-content" class="revision-toc-content"></div>
+    </div>
   </div>
 </div>