From dfca481e9e60923cb566d35613da7c4b156e5bf8 Mon Sep 17 00:00:00 2001
From: Aaron Pham <29749331+aarnphm@users.noreply.github.com>
Date: Thu, 1 Feb 2024 19:44:33 -0500
Subject: [PATCH] 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>
---
 components/scripts/search.inline.ts |  4 ++++
 components/styles/search.scss       | 13 +++++++------
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/components/scripts/search.inline.ts b/components/scripts/search.inline.ts
index 3bbfa7bf27e9b..7871b39d630fa 100644
--- a/components/scripts/search.inline.ts
+++ b/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 {
diff --git a/components/styles/search.scss b/components/styles/search.scss
index e84172e3503d1..11e7c4e14b2a6 100644
--- a/components/styles/search.scss
+++ b/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 {