fix(pillar-bar): stop sidebar clip on desktop and overlap on mobile

Anchor the bar's left edge to the sidebar gutter width instead of spanning
full width, so it no longer paints over the fixed sidebar on desktop. Mount
the bar in-flow after Vocs's gutterTop and switch it to position:static on
mobile, where the top nav is in normal flow and a fixed bar floated over the
section curtain. Match the mobile bar background to the nav and trim its
left padding.

Author: jayeshbhole

vocs.config.tsx

@@ -1301,8 +1301,9 @@ export default defineConfig({
     margin-top: var(--zd-pillar-bar-height);
   }
 
-  /* Pillar bar: fixed horizontal nav directly below the top header.
-     Mounted at document.body so it escapes the fixed-height gutterTop. */
+  /* Pillar bar: horizontal nav directly below the top header. Inserted in-flow
+     right after Vocs's gutterTop; pinned fixed on desktop (below), in-flow on
+     mobile (see media query). */
   .zd-pillar-bar {
     position: fixed;
     top: var(--vocs-topNav_height, 56px);
@@ -1313,13 +1314,16 @@ export default defineConfig({
     align-items: center;
     gap: 4px;
     height: var(--zd-pillar-bar-height);
-    /* Match Vocs's leftGutterWidth calc — that variable is scoped to
-       .vocs_DocsLayout so it's not visible on body. Recompute it here using
-       :root-scoped vars so the bar's content aligns with the search bar. */
-    padding-left: max(
+    /* Start the bar AFTER the sidebar gutter instead of spanning full width.
+       Vocs's leftGutterWidth var is scoped to .vocs_DocsLayout (not visible on
+       body), so recompute the same max() here. Anchoring left to it keeps the
+       bar from overlapping the fixed sidebar (gutterLeft, z-index 14) — the
+       pillar bar's z-index 50 would otherwise paint over the sidebar's top. */
+    left: max(
       calc((100vw - var(--vocs-content_width)) / 2),
       var(--vocs-sidebar_width)
     );
+    padding-left: 0;
     padding-right: 24px;
     border-bottom: 1px solid var(--vocs-color_border);
     background: var(--vocs-color_background);
@@ -1349,12 +1353,21 @@ export default defineConfig({
     background: var(--vocs-color_backgroundIrisTint);
   }
 
-  /* On narrow viewports, Vocs hides the desktop top nav and shows a mobile drawer.
-     Hide the pillar bar there too — Vocs's mobile menu will surface pillar links via
-     the sidebar. */
+  /* On narrow viewports Vocs makes the top nav position:initial (in normal flow)
+     and shows a sticky section curtain below it. The bar is inserted in-flow
+     right after the top nav, so drop the fixed positioning and let it stack
+     naturally — a fixed bar would float over and hide that curtain. No sidebar
+     gutter here either, so span full width. */
   @media (max-width: 1080px) {
-    .zd-pillar-bar { display: none; }
-    .vocs_DocsLayout_content { padding-top: var(--vocs-topNav_height, 56px) !important; }
+    .zd-pillar-bar {
+      position: static;
+      padding-left: 8px;
+      /* Match the mobile top nav / curtain background (both use backgroundDark). */
+      background: var(--vocs-color_backgroundDark);
+    }
+    /* Top nav is in-flow on mobile, so content needs no extra top padding;
+       the in-flow bar already occupies its own space. */
+    .vocs_DocsLayout_content { padding-top: 0 !important; }
     .vocs_DocsLayout_gutterRight { margin-top: 0; }
   }
 </style>`;
@@ -1402,11 +1415,16 @@ export default defineConfig({
 
   function mount() {
     if (document.getElementById('zd-pillar-bar')) return;
-    if (!document.body) return;
+    // Insert as a sibling right after Vocs's top-nav container so the bar lives
+    // in normal document flow. On desktop (>=1081px) the CSS pins it with
+    // position:fixed (DOM position irrelevant). On mobile (<=1080px) Vocs makes
+    // the top nav position:initial (in-flow) and shows a sticky section curtain;
+    // an in-flow bar here sits correctly below the nav instead of a fixed bar
+    // floating over and hiding that curtain.
+    var gutterTop = document.querySelector('.vocs_DocsLayout_gutterTop');
+    if (!gutterTop || !gutterTop.parentNode) return;
     var bar = build();
-    // Mount at body level so it escapes Vocs's fixed-height gutterTop container.
-    // The CSS pins it via position:fixed below the existing top nav.
-    document.body.appendChild(bar);
+    gutterTop.parentNode.insertBefore(bar, gutterTop.nextSibling);
     updateActive();
   }