From fe57f7f489ce4934fd805ead5ac05380ec5a73e3 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 23 Sep 2024 07:39:20 -0500
Subject: [PATCH] Search UI tweaks (#13903)

---
 web/src/components/input/InputWithTags.tsx |  2 +-
 web/src/views/search/SearchView.tsx        | 20 +++++++++++++-------
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/web/src/components/input/InputWithTags.tsx b/web/src/components/input/InputWithTags.tsx
index c21dba733..802e4acaa 100644
--- a/web/src/components/input/InputWithTags.tsx
+++ b/web/src/components/input/InputWithTags.tsx
@@ -445,7 +445,7 @@ export default function InputWithTags({
             onFocus={handleInputFocus}
             onBlur={handleInputBlur}
             onKeyDown={handleInputKeyDown}
-            className="text-md h-10 pr-24"
+            className="text-md h-9 pr-24"
             placeholder="Search..."
           />
           <div className="absolute right-3 top-0 flex h-full flex-row items-center justify-center gap-5">
diff --git a/web/src/views/search/SearchView.tsx b/web/src/views/search/SearchView.tsx
index 56257ee3e..06ad73b3e 100644
--- a/web/src/views/search/SearchView.tsx
+++ b/web/src/views/search/SearchView.tsx
@@ -22,6 +22,7 @@ import useKeyboardListener, {
 } from "@/hooks/use-keyboard-listener";
 import scrollIntoView from "scroll-into-view-if-needed";
 import InputWithTags from "@/components/input/InputWithTags";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 
 type SearchViewProps = {
   search: string;
@@ -276,13 +277,18 @@ export default function SearchView({
         )}
 
         {hasExistingSearch && (
-          <SearchFilterGroup
-            className={cn(
-              "w-full justify-between md:justify-start lg:justify-end",
-            )}
-            filter={searchFilter}
-            onUpdateFilter={onUpdateFilter}
-          />
+          <ScrollArea className="w-full whitespace-nowrap lg:ml-[35%]">
+            <div className="flex flex-row">
+              <SearchFilterGroup
+                className={cn(
+                  "w-full justify-between md:justify-start lg:justify-end",
+                )}
+                filter={searchFilter}
+                onUpdateFilter={onUpdateFilter}
+              />
+              <ScrollBar orientation="horizontal" className="h-0" />
+            </div>
+          </ScrollArea>
         )}
       </div>