bugfix: fix search page with filter bar

Author: densumesh

clients/search-component/src/TrieveModal/Search/SearchMode.tsx

@@ -125,35 +125,37 @@ export const SearchMode = () => {
         </div>
       )}
       <SearchInput />
-      <SearchPage />
-      <ul
-        className={cn(
-          `trieve-elements-${props.type} tv-grow`,
-          props.type === "ecommerce" && !props.inline  &&
-            "tv-grid tv-grid-cols-2 sm:tv-grid-cols-3 md:tv-grid-cols-4 lg:tv-grid-cols-5 tv-gap-2 tv-mt-0.5 tv-py-2 tv-pr-0.5",
-          props.type === "ecommerce" && props.inline && props.defaultSearchMode === "search" &&             
-            "tv-grid tv-grid-cols-2 sm:tv-grid-cols-3 md:tv-grid-cols-4 tv-gap-4 tv-mt-0.5 tv-py-2 tv-pr-0.5 tv-max-w-[70vw]",
-          props.type === "ecommerce" && props.inline && props.defaultSearchMode !== "search" && "tv-grid tv-grid-cols-1",
-          "tv-overflow-y-auto",
-        )}
-      >
-        {resultsLength && props.chat && imageUrl.length == 0 && props.defaultSearchMode !== "search" ? (
-          <GoToChatPrompt />
-        ) : null}
-        {props.type === "pdf" ? (
-          <div className="tv-grid md:tv-grid-cols-3">{resultsDisplay}</div>
-        ) : (
-          resultsDisplay
-        )}
-      </ul>
-      {hasQuery && !resultsLength && !loadingResults && (
-        <NoResults props={props} query={query} />
-      )}
-      {hasQuery && !resultsLength && loadingResults && (
-        <div className="tv-text-sm tv-animate-pulse tv-text-center tv-my-8 tv-flex tv-flex-col tv-gap-2 tv-col-span-full">
-          <p className="">Searching...</p>
+        <div className="tv-flex tv-flex-grow tv-overflow-y-auto">
+          <SearchPage />
+          <ul
+            className={cn(
+              `trieve-elements-${props.type} tv-grow`,
+              props.type === "ecommerce" && !props.inline  &&
+                "tv-grid tv-grid-cols-2 sm:tv-grid-cols-3 md:tv-grid-cols-4 lg:tv-grid-cols-5 tv-gap-2 tv-mt-0.5 tv-py-2 tv-pr-0.5",
+              props.type === "ecommerce" && props.inline && props.defaultSearchMode === "search" &&             
+                "tv-grid tv-grid-cols-2 sm:tv-grid-cols-3 md:tv-grid-cols-4 tv-gap-4 tv-mt-0.5 tv-py-2 tv-pr-0.5 tv-max-w-[70vw]",
+              props.type === "ecommerce" && props.inline && props.defaultSearchMode !== "search" && "tv-grid tv-grid-cols-1",
+              "tv-overflow-y-auto",
+            )}
+          >
+            {resultsLength && props.chat && imageUrl.length == 0 && props.defaultSearchMode !== "search" ? (
+              <GoToChatPrompt />
+            ) : null}
+            {props.type === "pdf" ? (
+              <div className="tv-grid md:tv-grid-cols-3">{resultsDisplay}</div>
+            ) : (
+              resultsDisplay
+            )}
+          </ul>
         </div>
-      )}
+          {hasQuery && !resultsLength && !loadingResults && (
+            <NoResults props={props} query={query} />
+          )}
+          {hasQuery && !resultsLength && loadingResults && (
+            <div className="tv-text-sm tv-animate-pulse tv-text-center tv-my-8 tv-flex tv-flex-col tv-gap-2 tv-col-span-full">
+              <p className="">Searching...</p>
+            </div>
+          )}
     </>
   );
 };