From ce4896e2f8a4df7db76c15fa23e6a3bd53e73f71 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sat, 21 Sep 2024 12:49:47 -0500
Subject: [PATCH] Add scrollarea to search filter buttons when screen is
 between breakpoints

---
 web/src/views/search/SearchView.tsx | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

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>