From 98db2dccea56e1ed19e332db4a8fc4b76371a3c5 Mon Sep 17 00:00:00 2001
From: Brandon Tabaska <btabaska@gmail.com>
Date: Mon, 10 Jun 2024 12:57:39 -0400
Subject: [PATCH 1/2] added sticky searchbar

---
 .../src/app/[locale]/search/SearchForm.tsx    | 42 ++++++++++---------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/frontend/src/app/[locale]/search/SearchForm.tsx b/frontend/src/app/[locale]/search/SearchForm.tsx
index 1f5d60341..dffa0c040 100644
--- a/frontend/src/app/[locale]/search/SearchForm.tsx
+++ b/frontend/src/app/[locale]/search/SearchForm.tsx
@@ -60,26 +60,28 @@ export function SearchForm({
         </div>
         <div className="grid-row grid-gap">
           <div className="tablet:grid-col-4">
-            <SearchOpportunityStatus
-              formRef={formRef}
-              initialQueryParams={statusQueryParams}
-            />
-            <SearchFilterFundingInstrument
-              formRef={formRef}
-              initialQueryParams={fundingInstrumentQueryParams}
-            />
-            <SearchFilterEligibility
-              formRef={formRef}
-              initialQueryParams={eligibilityQueryParams}
-            />
-            <SearchFilterAgency
-              formRef={formRef}
-              initialQueryParams={agencyQueryParams}
-            />
-            <SearchFilterCategory
-              formRef={formRef}
-              initialQueryParams={categoryQueryParams}
-            />
+            <div className="position-sticky top-0 maxh-viewport overflow-auto">
+              <SearchOpportunityStatus
+                formRef={formRef}
+                initialQueryParams={statusQueryParams}
+              />
+              <SearchFilterFundingInstrument
+                formRef={formRef}
+                initialQueryParams={fundingInstrumentQueryParams}
+              />
+              <SearchFilterEligibility
+                formRef={formRef}
+                initialQueryParams={eligibilityQueryParams}
+              />
+              <SearchFilterAgency
+                formRef={formRef}
+                initialQueryParams={agencyQueryParams}
+              />
+              <SearchFilterCategory
+                formRef={formRef}
+                initialQueryParams={categoryQueryParams}
+              />
+            </div>
           </div>
           <div className="tablet:grid-col-8">
             <SearchResultsHeader

From 94df8f48b0397391ab48178ab6e86ee04b189d4d Mon Sep 17 00:00:00 2001
From: Brandon Tabaska <btabaska@gmail.com>
Date: Wed, 12 Jun 2024 09:42:14 -0400
Subject: [PATCH 2/2] iterating based on feedback

---
 frontend/src/app/[locale]/search/SearchForm.tsx     | 2 +-
 frontend/src/styles/_uswds-theme-custom-styles.scss | 7 +++++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/[locale]/search/SearchForm.tsx b/frontend/src/app/[locale]/search/SearchForm.tsx
index dffa0c040..ceacf0041 100644
--- a/frontend/src/app/[locale]/search/SearchForm.tsx
+++ b/frontend/src/app/[locale]/search/SearchForm.tsx
@@ -60,7 +60,7 @@ export function SearchForm({
         </div>
         <div className="grid-row grid-gap">
           <div className="tablet:grid-col-4">
-            <div className="position-sticky top-0 maxh-viewport overflow-auto">
+            <div className="search-filter">
               <SearchOpportunityStatus
                 formRef={formRef}
                 initialQueryParams={statusQueryParams}
diff --git a/frontend/src/styles/_uswds-theme-custom-styles.scss b/frontend/src/styles/_uswds-theme-custom-styles.scss
index c7289d05f..9bd9a5c0f 100644
--- a/frontend/src/styles/_uswds-theme-custom-styles.scss
+++ b/frontend/src/styles/_uswds-theme-custom-styles.scss
@@ -30,3 +30,10 @@ i.e.
     @include u-shadow(4);
   }
 }
+
+.search-filter {
+  position: sticky;
+  top: 0;
+  overflow: auto;
+  max-height: 100vh;
+}