From 89fb07da0eb7ec1d8875747136f78d5f4b52a9f0 Mon Sep 17 00:00:00 2001
From: samlhuillier <sam.jansa123@gmail.com>
Date: Tue, 28 Nov 2023 21:32:59 -0600
Subject: [PATCH] fix search suggestions

---
 src/components/Search/Search.tsx | 30 ++++++++++++++++++------------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/components/Search/Search.tsx b/src/components/Search/Search.tsx
index 628bfce3..2f4cf620 100644
--- a/src/components/Search/Search.tsx
+++ b/src/components/Search/Search.tsx
@@ -49,7 +49,11 @@ const SearchComponent: React.FC<SearchComponentProps> = ({ onFileSelect }) => {
   }, []);
 
   return (
-    <div ref={containerRef} className="relative p-0.5 w-full">
+    <div
+      ref={containerRef}
+      className="p-0.5 w-full"
+      style={{ height: "calc(100vh - 30px)" }}
+    >
       <input
         type="text"
         className="border border-gray-300 rounded-md p-2 w-full h-[7px]"
@@ -57,17 +61,19 @@ const SearchComponent: React.FC<SearchComponentProps> = ({ onFileSelect }) => {
         onChange={(e) => setSearchQuery(e.target.value)}
         placeholder="Search"
       />
-      <div className="absolute z-10 translate-x-[-40px] w-[210px] bg-white border border-gray-300 shadow-lg max-h-screen overflow-y-auto">
-        {searchResults.map((result, index) => (
-          <div
-            key={index}
-            className="border-b border-gray-300 p-2 cursor-pointer w-full hover:bg-gray-100"
-            onClick={() => onFileSelect(result.notepath)}
-          >
-            <p>{result.content}</p>
-          </div>
-        ))}
-      </div>
+      {searchResults.length > 0 && (
+        <div className=" z-10 h-full translate-x-[-40px] w-[210px] bg-white border border-gray-300 shadow-lg overflow-y-auto">
+          {searchResults.map((result, index) => (
+            <div
+              key={index}
+              className="border-b border-gray-300 p-2 cursor-pointer w-full hover:bg-gray-100"
+              onClick={() => onFileSelect(result.notepath)}
+            >
+              <p>{result.content}</p>
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 };