fix: Coveo z-index + make sticky

Author: lamATnginx

assets/css/v2/style.css

@@ -27,6 +27,7 @@
 
   --code-copy-icon-height: 1rem;
   --code-copy-icon-width: 1rem;
+  --breadcrumb-max-height: 54px;
   --sidebar-margin: 24px;
   --sidebar-line-box-side-length: 8px;
   --sidebar-line-box-top: 6px;
@@ -91,7 +92,7 @@ p {
 
 /* layout */
 header {
-  margin: 2rem 2rem;
+  margin: 2rem 2rem 0 2rem;
 
   .header-container {
     display: flex;
@@ -209,6 +210,7 @@ nav {
 .content-layout {
   display: grid;
   grid-template-columns: var(--text-content-width-iphone-13) 1fr;
+  grid-template-rows: var(--breadcrumb-max-height) 1fr;
 }
 
 .docs-container {
@@ -219,7 +221,6 @@ nav {
   display: flex;
   flex-direction: column;
   position: relative;
-  z-index: 9999;
 }
 
 #searchbox {
@@ -238,7 +239,7 @@ nav {
 }
 
 .breadcrumb-layout {
-  margin: 0 2rem;
+  grid-column: 1 / -1;
 }
 
 .main-layout {
@@ -276,13 +277,6 @@ nav {
     grid-template-columns: var(--sidebar-width) 1fr;
     column-gap: var(--component-gap);
   }
-
-  .breadcrumb-layout {
-    display: grid;
-    grid-template-columns: var(--sidebar-width) 1fr;
-    column-gap: var(--component-gap);
-    align-items: center;
-  }
 }
 @media (max-width: 1184px) {
   .sidebar-layout {
@@ -322,6 +316,7 @@ nav {
         --side-gutter-width
       );
     column-gap: var(--component-gap);
+    margin-top: 2rem;
   }
 
   .content-layout .side-gutter {
@@ -399,6 +394,12 @@ nav {
   --atomic-font-family: inherit;
 }
 
+atomic-search-interface {
+  height: fit-content;
+  margin-bottom: 2rem;
+  margin-top: 2rem;
+}
+
 atomic-search-box {
   &::part(wrapper) {
     border-radius: 0;
@@ -411,6 +412,10 @@ atomic-search-box {
     width: calc(100% + 2px);
     margin-left: -1px;
   }
+
+  &::part(submit-button-wrapper) {
+    --atomic-primary: var(--atomic-neutral-dark);
+  }
 }
 
 atomic-query-summary {
@@ -474,8 +479,8 @@ atomic-search-layout atomic-layout-section[section="search"] {
   position: sticky;
   top: 0;
   height: 100vh;
-  margin-top: -1rem;
-  padding-top: 1rem;
+  margin: 0;
+  padding: 0;
 }
 
 .sidebar .product-selector-button {
@@ -780,7 +785,7 @@ atomic-search-layout atomic-layout-section[section="search"] {
 main {
   flex: 1;
   min-width: 30rem;
-  margin: 2rem 2rem;
+  margin: 0 2rem 2rem 2rem;
 }
 
 p {
@@ -792,7 +797,7 @@ p {
   color: var(--color-foreground);
   text-decoration: none;
   font-size: 0.875rem;
-  grid-column: 2 / -1;
+  margin: 0;
 }
 
 .breadcrumb .active {

layouts/_default/baseof.html

@@ -57,10 +57,11 @@
       });
 
       // swap out v1 and v2 elements
-      const v1ElementIds = ["sidebar", "footer", "toc", "api", "search-v1"]
+      const v1ElementIds = ["sidebar", "footer", "toc", "api", "search-v1", "breadcrumb-v1"]
 
       v1ElementIds.forEach((elementId) => {
         const element = document.getElementById(elementId);
+        console.log(element)
         if (element !== null) {
           element.style.display = isNewTheme ? "none" : "";
         }
@@ -172,11 +173,7 @@
     </header>
 
     <section class="base-layout">
-      <section class="breadcrumb-layout">
-        <atomic-search-interface id="search-standalone" data-mf="true" style="display:none;">
-          <atomic-search-box redirection-url="/search.html">
-          </atomic-search-box>
-        </atomic-search-interface>
+      <section id="breadcrumb-v1">
         {{ if not .IsHome }}
           {{ if not (in .Params.display_breadcrumb "false" ) }}
           {{ partial "breadcrumb" .}}  

layouts/_default/docs.html

@@ -22,6 +22,13 @@
     </div>
 
     <section class="content-layout">
+      <section class="breadcrumb-layout" data-mf="true" style="display: none;">
+        {{ if not .IsHome }}
+          {{ if not (in .Params.display_breadcrumb "false" ) }}
+          {{ partial "breadcrumb" .}}  
+          {{ end }}
+        {{ end }}
+      </section>
       <div class="text-content">
         <h1>{{ .Title }}</h1>
         {{ .Content }}

layouts/partials/sidebar-v2.html

@@ -20,6 +20,10 @@
 {{ $productIdentifier := index ((split $relPermalink "/")) 1 }}
 {{ $productName := index $productMap $productIdentifier }}
 
+<atomic-search-interface id="search-standalone" data-mf="true" style="display:none;">
+    <atomic-search-box redirection-url="/search.html">
+    </atomic-search-box>
+</atomic-search-interface>
 <button class="product-selector-button" id="product-selector-button">
     {{/* product name and selector */}}
     <div class="product-name">{{ $productName }}</div>