Coveo: Fixed suggestions not showing on search bar

Fix rendering coveo suggestions

Author: nginx-jack

assets/css/v2/style.css

@@ -435,7 +435,7 @@ ol li:last-child {
   -webkit-backdrop-filter: blur(20px);
   position: sticky;
   top: 0;
-  z-index: 1;
+  z-index: 2;
 
   .header-container {
     display: flex;
@@ -452,9 +452,6 @@ ol li:last-child {
     .header__search {
       display: block;
       width: 14rem;
-      /* This is a horrible hack to stop coveo overflowing 3500px for no reason. :sad */
-      transform: translateY(0);
-      overflow: hidden;
     }
 
     .header__product-selector {
@@ -946,7 +943,11 @@ main {
 
 /* MARK: Coveo
 */
-#search-v2 {
+
+/* Search results on content */
+atomic-search-interface#search-v2 {
+  position: relative;
+  z-index: 1;
   display: inline-block !important;
   width: 95vw;
   grid-column: 1 / -1;
@@ -961,101 +962,103 @@ main {
   atomic-search-box {
     z-index: 0;
   }
-}
 
-atomic-search-interface {
-  height: fit-content;
-}
+  atomic-search-layout {
+    grid-template-areas:
+      "atomic-section-search"
+      "atomic-section-status"
+      "atomic-section-facets"
+      "atomic-section-main";
+
+    grid-template-columns: minmax(50%, 100%) !important;
+
+    @media (min-width: 1024px) {
+      &:has(atomic-search-box) {
+        grid-template-areas:
+          "atomic-section-search atomic-section-status"
+          "atomic-section-facets atomic-section-main  "
+          "atomic-section-facets .                    " !important;
+      }
 
-.header-search-box {
-  &::part(wrapper) {
-    border-radius: 0;
-    border-color: oklch(var(--color-foreground));
-  }
+      grid-template-areas:
+        "atomic-section-facets atomic-section-status"
+        "atomic-section-facets atomic-section-main  "
+        "atomic-section-facets .                    " !important;
 
-  &::part(suggestions-wrapper) {
-    border-radius: 0;
-    border-color: oklch(var(--color-foreground));
-    width: calc(100% + 2px);
-    margin-inline-start: -1px;
-  }
+      grid-template-columns: minmax(17rem, 24rem) minmax(50%, 100%) !important;
+      column-gap: calc(1.5rem + 2rem) !important;
+    }
 
-  &::part(submit-button-wrapper) {
-    --atomic-primary: var(--atomic-neutral-dark);
-  }
-}
+    atomic-layout-section[section="status"] {
+      /* Override Coveo's width to be full */
+      margin: var(--atomic-layout-spacing-y) 0;
+      max-width: 100%;
+      display: block;
+      width: 100%;
 
-atomic-refine-toggle {
-  display: none;
-}
+      .atomic-full-summary-and-sort {
+        display: flex;
+        flex-direction: column;
+        align-items: start;
+        gap: 1rem;
+        justify-content: space-between;
 
-@media (max-width: 1024px) {
-  atomic-refine-toggle {
-    display: block;
-  }
-}
+        @media (min-width: 480px) {
+          flex-direction: row;
+          align-items: center;
+        }
 
-atomic-query-summary {
-  /* Show duration */
-  &::part(duration) {
-    display: inline-block !important;
-  }
-}
+        atomic-query-summary {
+          &::part(duration) {
+            display: inline-block !important;
+          }
+        }
 
-atomic-search-layout {
-  grid-template-areas:
-    "atomic-section-search"
-    "atomic-section-status"
-    "atomic-section-facets"
-    "atomic-section-main";
+        atomic-refine-toggle {
+          display: none;
 
-  grid-template-columns: minmax(50%, 100%) !important;
+          @media (max-width: 1024px) {
+            display: block;
+          }
+        }
+      }
+    }
 
-  @media (min-width: 1024px) {
-    grid-template-areas:
-      "atomic-section-search atomic-section-status"
-      "atomic-section-facets atomic-section-main  "
-      "atomic-section-facets .                    " !important;
+    atomic-layout-section[section="search"] {
+      /* Override Coveo's width to be full */
+      width: 100% !important;
+      max-width: 100% !important;
+    }
 
-    grid-template-columns: minmax(17rem, 24rem) minmax(50%, 100%) !important;
-    column-gap: calc(1.5rem + 2rem) !important;
+    atomic-layout-section[section="facets"] {
+      margin: var(--atomic-layout-spacing-y) 0;
+    }
   }
 }
 
-atomic-search-layout atomic-layout-section[section="status"] {
-  /* Override Coveo's width to be full */
-  max-width: 100%;
-  display: block;
-  width: 100%;
-}
-
-atomic-search-layout atomic-layout-section[section="search"] {
-  /* Override Coveo's width to be full */
-  width: 100% !important;
-  max-width: 100% !important;
-}
+/* Search bar on header */
+atomic-search-interface#search-standalone-header {
+  height: fit-content;
 
-.atomic-full-summary-and-sort {
-  display: flex;
-  flex-direction: column;
-  align-items: start;
-  gap: 1rem;
-  justify-content: space-between;
+  .header-search-box {
+    &::part(wrapper) {
+      border-radius: 0;
+      border-color: oklch(var(--color-foreground));
+    }
 
-  @media (min-width: 480px) {
-    flex-direction: row;
-    align-items: center;
-  }
+    &::part(suggestions-wrapper) {
+      border-radius: 0;
+      border-color: oklch(var(--color-foreground));
+      width: calc(100% + 2px);
+      margin-inline-start: -1px;
+    }
 
-  atomic-sort-dropdown::part(label) {
-    margin-inline-start: 0;
+    &::part(submit-button-wrapper) {
+      --atomic-primary: var(--atomic-neutral-dark);
+    }
   }
 }
 
-#atomic-search-box-xqtsq-popup {
-  z-index: 9999;
-}
-
 body:not(:has(.main-layout)) header atomic-search-interface {
   /* Show on landing pages */
   display: block;

assets/js/coveo.js

@@ -89,6 +89,16 @@ async function atomicCoveo() {
 
     await searchBarSidebar.executeFirstSearch();
   }
+
+  /* Hide atomic-relevance-inspector */
+  const shadowElements = searchBarHeader.shadowRoot.childNodes;
+  for (let i = 0; i < shadowElements.length; i++) {
+    const val = shadowElements[i];
+    if (val.localName === 'atomic-relevance-inspector') {
+      val.style.display = 'none';
+      break;
+    }
+  }
 }
 
 document.addEventListener('DOMContentLoaded', async () => {

exampleSite/content/search.md

@@ -1,7 +1,5 @@
 ---
 type: search
 title: Search
-params:
-  searchOnPage: true
 url: search.html
 ---