fix(search): increase size on fullPageWidth viewport (#784)

* fix(search): increase size on fullPageWidth viewport

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* chore: fix width size to be consistent on multiple views

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* chore: set layout to 0 if there is no term

remove flashing by setting max-height

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

---------

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

quartz/components/scripts/search.inline.ts

@@ -451,6 +451,10 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
       searchLayout.style.opacity = "1"
     }
 
+    if (term === "" && searchLayout) {
+      searchLayout.style.opacity = "0"
+    }
+
     if (term.toLowerCase().startsWith("#")) {
       searchType = "tags"
     } else {

quartz/components/styles/search.scss

@@ -54,15 +54,11 @@
     }
 
     & > #search-space {
-      width: 50%;
+      width: 75%;
       margin-top: 12vh;
       margin-left: auto;
       margin-right: auto;
 
-      @media all and (max-width: $fullPageWidth) {
-        width: 90%;
-      }
-
       & > * {
         width: 100%;
         border-radius: 5px;
@@ -94,7 +90,8 @@
         border: 1px solid var(--lightgray);
 
         & > div {
-          height: calc(75vh - 20em);
+          // vh - #search-space.margin-top
+          height: calc(75vh - 12vh);
           background: none;
 
           &:first-child {
@@ -146,6 +143,10 @@
               0 14px 50px rgba(27, 33, 48, 0.12),
               0 10px 30px rgba(27, 33, 48, 0.16);
           }
+
+          a.internal {
+            background-color: none;
+          }
         }
 
         & > #results-container {