From 93295aa0e77b29c1cf72e56dc2d9b72bc6bc7bcd Mon Sep 17 00:00:00 2001
From: afwilcox <alecwilcox@gmail.com>
Date: Tue, 3 Oct 2023 15:50:39 -0700
Subject: [PATCH] Fix Filter Dropdowns not appearing properly (#144)

---
 frontend/src/app/common/api.ts                |  2 +-
 .../complaints/complaint-filter.tsx           | 36 +++++++++++++++++++
 frontend/src/assets/sass/complaint.scss       | 12 +++++++
 frontend/src/assets/sass/layout.scss          |  6 ++--
 4 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/common/api.ts b/frontend/src/app/common/api.ts
index 31156f272..632ea6ae9 100644
--- a/frontend/src/app/common/api.ts
+++ b/frontend/src/app/common/api.ts
@@ -98,7 +98,7 @@ export const post = <T, M = {}>(
 		axios
 			.post(url, params, config)
 			.then((response: AxiosResponse) => {
-				resolve(response.data as T);
+        resolve(response.data as T);
 			})
 			.catch((error: AxiosError) => {
 				if (parameters.enableNotification) {
diff --git a/frontend/src/app/components/containers/complaints/complaint-filter.tsx b/frontend/src/app/components/containers/complaints/complaint-filter.tsx
index 572146ee7..b817a41a9 100644
--- a/frontend/src/app/components/containers/complaints/complaint-filter.tsx
+++ b/frontend/src/app/components/containers/complaints/complaint-filter.tsx
@@ -86,6 +86,10 @@ export const ComplaintFilter: FC<Props> = ({ type, isOpen }) => {
                 }}
                 placeholder="Select"
                 classNamePrefix="comp-select"
+                classNames={{
+                  menu: () =>
+                    'top-layer-select',  
+                }}
                 id="nature-of-complaint-select-id"
                 value={natureOfComplaint}
               />
@@ -102,6 +106,10 @@ export const ComplaintFilter: FC<Props> = ({ type, isOpen }) => {
                 }}
                 placeholder="Select"
                 classNamePrefix="comp-select"
+                classNames={{
+                  menu: () =>
+                    'top-layer-select',  
+                }}
                 id="species-select-id"
                 value={species}
               />
@@ -187,6 +195,10 @@ export const ComplaintFilter: FC<Props> = ({ type, isOpen }) => {
                 }}
                 placeholder="Select"
                 classNamePrefix="comp-select"
+                classNames={{
+                  menu: () =>
+                    'top-layer-select',  
+                }}
                 id="status-select-id"
                 value={status}
               />
@@ -215,6 +227,10 @@ export const ComplaintFilter: FC<Props> = ({ type, isOpen }) => {
                 }}
                 placeholder="Select"
                 classNamePrefix="comp-select"
+                classNames={{
+                  menu: () =>
+                    'top-layer-select',  
+                }}
                 id="violation-type-select-id"
                 value={violationType}
               />
@@ -300,6 +316,10 @@ export const ComplaintFilter: FC<Props> = ({ type, isOpen }) => {
                 }}
                 placeholder="Select"
                 classNamePrefix="comp-select"
+                classNames={{
+                  menu: () =>
+                    'top-layer-select',  
+                }}
                 id="status-select-id"
                 value={status}
               />
@@ -336,6 +356,10 @@ export const ComplaintFilter: FC<Props> = ({ type, isOpen }) => {
                 }}
                 placeholder="Select"
                 classNamePrefix="comp-select"
+                classNames={{
+                  menu: () =>
+                    'top-layer-select',  
+                }}
                 value={region}
                 id="region-select-filter-id"
               />
@@ -352,6 +376,10 @@ export const ComplaintFilter: FC<Props> = ({ type, isOpen }) => {
                 }}
                 placeholder="Select"
                 classNamePrefix="comp-select"
+                classNames={{
+                  menu: () =>
+                    'top-layer-select',  
+                }}
                 id="zone-select-id"
                 value={zone}
               />
@@ -369,6 +397,10 @@ export const ComplaintFilter: FC<Props> = ({ type, isOpen }) => {
                 }}
                 placeholder="Select"
                 classNamePrefix="comp-select"
+                classNames={{
+                  menu: () =>
+                    'top-layer-select',  
+                }}
                 id="community-select-id"
                 value={community}
               />
@@ -386,6 +418,10 @@ export const ComplaintFilter: FC<Props> = ({ type, isOpen }) => {
                 }}
                 placeholder="Select"
                 classNamePrefix="comp-select"
+                classNames={{
+                  menu: () =>
+                    'top-layer-select',  
+                }}
                 id="officer-select-id"
                 value={officer}
               />
diff --git a/frontend/src/assets/sass/complaint.scss b/frontend/src/assets/sass/complaint.scss
index 5be7bbf1a..abc768ebd 100644
--- a/frontend/src/assets/sass/complaint.scss
+++ b/frontend/src/assets/sass/complaint.scss
@@ -341,6 +341,11 @@
   box-shadow: 0px 0px 0px 4px $blue-300 !important;
 }
 
+//Need these to make sure the filters show up on top of other frozen items
+.top-layer-select, .react-datepicker-popper {
+  z-index: 7000 !important;
+}
+
 .comp-details-edit-container {
   display: flex;
 }
@@ -705,6 +710,7 @@
   margin-top: -7px;
 }
 
+
 .no-bullets {
   list-style-type: none; /* Remove bullets */
   padding: 0; /* Remove padding */
@@ -922,6 +928,12 @@
   display: none;
 }
 
+//Toasts Gets the top layer
+.Toastify {
+  z-index: 10000;
+  position: relative;
+}
+
 .Toastify__toast--error {
   border: 1px solid #EEA8AB;
   border-radius: 3px !important;
diff --git a/frontend/src/assets/sass/layout.scss b/frontend/src/assets/sass/layout.scss
index 36d7ec290..928ff532c 100644
--- a/frontend/src/assets/sass/layout.scss
+++ b/frontend/src/assets/sass/layout.scss
@@ -9,7 +9,7 @@
   position: fixed;
   width: 100%;
   top: 0;
-  z-index: 10000;
+  z-index: 9000;
 }
 
 .fixed-nav-header {
@@ -17,14 +17,14 @@
   padding-bottom: 0px !important;
   top: 72px; // Header (72px)
   background-color: $white;
-  z-index: 9000;
+  z-index: 8000;
 }
 
 .fixed-filter-header {
   position: sticky;
   top: 120px; // Header (72px) + Tabs (48px) 
   background-color: $white;
-  z-index: 9000;
+  z-index: 6000;
 }
 
 .fixed-table-header {