diff --git a/quartz/components/scripts/search.inline.ts b/quartz/components/scripts/search.inline.ts
index 769483d4e..abdef06da 100644
--- a/quartz/components/scripts/search.inline.ts
+++ b/quartz/components/scripts/search.inline.ts
@@ -188,7 +188,7 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
       removeAllChildren(preview)
     }
     if (searchLayout) {
-      searchLayout.style.visibility = "hidden"
+      searchLayout.classList.remove("display-results")
     }
 
     searchType = "basic" // reset search type after closing
@@ -424,7 +424,7 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
   async function onType(e: HTMLElementEventMap["input"]) {
     if (!searchLayout || !index) return
     currentSearchTerm = (e.target as HTMLInputElement).value
-    searchLayout.style.visibility = currentSearchTerm === "" ? "hidden" : "visible"
+    searchLayout.classList.toggle("display-results", currentSearchTerm !== "")
     searchType = currentSearchTerm.startsWith("#") ? "tags" : "basic"
 
     let searchResults: FlexSearch.SimpleDocumentSearchResultSetUnit[]
diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss
index 1471a77cb..7ede3595c 100644
--- a/quartz/components/styles/search.scss
+++ b/quartz/components/styles/search.scss
@@ -83,11 +83,14 @@
       }
 
       & > #search-layout {
-        display: flex;
+        display: none;
         flex-direction: row;
-        visibility: hidden;
         border: 1px solid var(--lightgray);
 
+        &.display-results {
+          display: flex;
+        }
+
         @media all and (min-width: $tabletBreakpoint) {
           &[data-preview] {
             & .result-card > p.preview {