ensure search items not being clipped off by bottom panel

Author: ryanlau

src/css/PreviewCard.css

@@ -1,4 +1,5 @@
 .preview-container {
+    padding-top: 10px;
     width: 100%;
     height: auto;
     justify-content: center;

src/css/SearchBar.css

@@ -3,6 +3,8 @@
   max-width: 360px;
   font-size: 15px;
   overflow: auto;
+  padding-bottom: 10px;
+  border-left: solid #D1BF80 2px;
 }
 
 
@@ -12,8 +14,8 @@
   border-radius: 10px;
   width: 100%;
   flex: 1;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   max-width: 500px;
+  height: fit-content;
 }
 
 .search-filter-container h1 {

src/routes/root.tsx

@@ -174,9 +174,7 @@ export default function Root() {
 
         <SearchBar setSearchFilters={setSearchFilters} setSearch={setSearch} />
       </div>
-      <div className="preview-contain-result">
-        <PreviewCard selectedRow={selectedRow} selectedData={selectedData} />
-      </div>
+      <PreviewCard selectedRow={selectedRow} selectedData={selectedData} />
     </>
   );
 }