@salesforcedevs/docs-components 1.20.1 → 1.20.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.20.1",
+    "version": "1.20.3",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
@@ -25,5 +25,5 @@
         "@types/lodash.orderby": "4.6.9",
         "@types/lodash.uniqby": "4.7.9"
     },
-    "gitHead": "636dccc5d9a814d279757e7ce6135a4c60f023b9"
+    "gitHead": "53341fe3e51cffb3368cbf3fbea5ef382250ce9e"
 }

package/src/modules/doc/contentCallout/contentCallout.css

@@ -4,6 +4,7 @@
 
 .dx-callout {
     border-radius: 4px;
+    margin: var(--dx-g-spacing-md) 0;
 }
 
 .dx-callout-base,

package/src/modules/doc/contentLayout/contentLayout.ts

@@ -269,13 +269,28 @@ export default class ContentLayout extends LightningElement {
             });
 
             // Adjusting the right nav bar on scroll.
+            // setting maxheight to make the RNB scrollable based on different parent elements
             if (rightNavBarEl) {
-                rightNavBarEl.style.top = docPhaseEl
-                    ? `${
-                          totalHeaderHeight +
-                          docPhaseEl.getBoundingClientRect().height
-                      }px`
-                    : `${totalHeaderHeight}px`;
+                const docPhaseElHeight = docPhaseEl
+                    ? docPhaseEl.getBoundingClientRect().height
+                    : 0;
+                const viewportHeight = window.innerHeight;
+                const maxHeight =
+                    viewportHeight -
+                    (docPhaseElHeight + totalHeaderHeight + 24); //added some margin of dx-toc
+
+                rightNavBarEl.style.top = `${
+                    totalHeaderHeight + docPhaseElHeight
+                }px`;
+
+                const toc = rightNavBarEl.querySelector("dx-toc");
+                const listContainer = toc?.shadowRoot?.querySelector(
+                    ".toc"
+                ) as HTMLElement;
+
+                if (listContainer) {
+                    listContainer.style.maxHeight = `${maxHeight}px`;
+                }
             }
 
             // If doc phase element exists, we need to account for its sticky position. Mobile should include the sidebar height (since it becomes sticky aswell).