From 5147ceacf23d2f5bb226c892ef3eb2115a096e4b Mon Sep 17 00:00:00 2001
From: afwilcox <alecwilcox@gmail.com>
Date: Fri, 29 Sep 2023 12:47:20 -0700
Subject: [PATCH] bugfix for sticky header with expanded filters

---
 .../containers/complaints/complaints.tsx         | 16 +++++++++++++++-
 frontend/src/assets/sass/layout.scss             |  1 +
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/frontend/src/app/components/containers/complaints/complaints.tsx b/frontend/src/app/components/containers/complaints/complaints.tsx
index a065d39ed..15ab950c5 100644
--- a/frontend/src/app/components/containers/complaints/complaints.tsx
+++ b/frontend/src/app/components/containers/complaints/complaints.tsx
@@ -140,7 +140,21 @@ export const Complaints: FC<Props> = ({ defaultComplaintType }) => {
           <Nav.Item
             className="ms-auto"
             {...getToggleProps({
-              onClick: () => setExpanded((prevExpanded) => !prevExpanded),
+                onClick: () => {
+                  const filterElem = document.querySelector("#collapsible-complaints-list-filter-id");
+                  const rect = filterElem?.getBoundingClientRect();
+                  const bottom = rect?.bottom;
+
+                  if({isExpanded}.isExpanded && bottom !== undefined && bottom < 140) //page has been scrolled while filter is open... need to close it!
+                  {
+                    setExpanded((prevExpanded) => !prevExpanded);
+                  }
+                  window.scrollTo({
+                    top: 0,
+                    behavior: "smooth",
+                    });
+                  setExpanded((prevExpanded) => !prevExpanded);
+                },
             })}
           >
             <div
diff --git a/frontend/src/assets/sass/layout.scss b/frontend/src/assets/sass/layout.scss
index f597c3e89..0ab53058b 100644
--- a/frontend/src/assets/sass/layout.scss
+++ b/frontend/src/assets/sass/layout.scss
@@ -15,6 +15,7 @@
   position: sticky !important;
   top: 72px; // Header (72px)
   background-color: $white;
+  z-index: 10000;
 }
 
 .fixed-filter-header {