@salesforcedevs/docs-components 1.3.106-alpha.3 → 1.3.106-alpha.5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.106-alpha.3",
+    "version": "1.3.106-alpha.5",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

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

@@ -210,32 +210,34 @@ export default class ContentLayout extends LightningElement {
             return;
         }
 
-        const globalNavHeight =
-            globalNavEl.offsetHeight + contextNavEl.offsetHeight;
-        const docHeaderHeight = docHeaderEl.offsetHeight;
-
-        sidebarEl.style.setProperty(
-            "--dx-c-content-sidebar-sticky-top",
-            `${globalNavHeight + docHeaderHeight}px`
-        );
-        docHeaderEl.style.setProperty(
-            "--dx-g-global-header-height",
-            `${globalNavHeight}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).
-        if (docPhaseEl) {
-            docPhaseEl.style.setProperty(
-                "--doc-c-phase-top",
-                `${
-                    window.innerWidth <= 769
-                        ? globalNavHeight +
-                          docHeaderHeight +
-                          sidebarEl.offsetHeight
-                        : globalNavHeight + docHeaderHeight
-                }px`
+        // sync with the browser to account for any reflows that may have happened
+        requestAnimationFrame(() => {
+            const globalNavHeight =
+                globalNavEl.offsetHeight + contextNavEl.offsetHeight;
+            const docHeaderHeight = docHeaderEl.offsetHeight;
+            sidebarEl.style.setProperty(
+                "--dx-c-content-sidebar-sticky-top",
+                `${globalNavHeight + docHeaderHeight}px`
             );
-        }
+            docHeaderEl.style.setProperty(
+                "--dx-g-global-header-height",
+                `${globalNavHeight}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).
+            if (docPhaseEl) {
+                docPhaseEl.style.setProperty(
+                    "--doc-c-phase-top",
+                    `${
+                        window.innerWidth < 769
+                            ? globalNavHeight +
+                              docHeaderHeight +
+                              sidebarEl.offsetHeight
+                            : globalNavHeight + docHeaderHeight
+                    }px`
+                );
+            }
+        });
     };
 
     updateHighlighted = (event: Event): void =>

package/src/modules/doc/header/header.css

@@ -87,6 +87,7 @@ header:not(.has-brand) > .header_l2 {
         margin-right: 0;
         padding: var(--dx-g-spacing-smd)
             var(--dx-g-global-header-padding-horizontal);
+        height: var(--dx-g-doc-header-main-nav-height);
     }
 
     .header_l2_group-title .header_lang-dropdown {

package/src/modules/doc/header/header.ts

@@ -8,7 +8,7 @@ import { track } from "dxUtils/analytics";
 
 const TABLET_MATCH = "980px";
 const MOBILE_MATCH = "880px";
-const SMALL_MOBILE_MATCH = "740px";
+const SMALL_MOBILE_MATCH = "768px";
 
 export default class Header extends HeaderBase {
     @api langValuePath: string = "id"; // allows to override how language property is interpreted, follows valuePath dropdown api.