From 9ffe43ce126479afc91483157cfbdf054a24ed30 Mon Sep 17 00:00:00 2001
From: mjaydenkim <mjaydenkim@gmail.com>
Date: Mon, 13 Jan 2025 19:38:13 -0500
Subject: [PATCH] Added hidden scroll to review modal

Also added ability to specify whether or not options should appear from top or bottom in select dropdowns (now, major menu appears from the top so it doesn't spill off the window).
---
 .../modules/Course/Components/MultiSelect.tsx |  6 ++--
 .../modules/Course/Components/ReviewModal.tsx |  1 +
 .../Course/Components/SingleSelect.tsx        |  6 ++--
 .../Course/Styles/ReviewModal.module.css      | 28 +++++++++++--------
 4 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/client/src/modules/Course/Components/MultiSelect.tsx b/client/src/modules/Course/Components/MultiSelect.tsx
index 4e30ce21..feb13935 100644
--- a/client/src/modules/Course/Components/MultiSelect.tsx
+++ b/client/src/modules/Course/Components/MultiSelect.tsx
@@ -9,7 +9,8 @@ const MultiSelect = ({
   value,
   options,
   placeholder,
-  onChange
+  onChange,
+  appearFromTop=false
 }: SelectProps) => {
   const [searchTerm, setSearchTerm] = useState<string>('');
   const [open, setOpen] = useState<boolean>(false);
@@ -82,7 +83,7 @@ const MultiSelect = ({
         />
       </div>
       {open && (
-        <ul className={styles.options}>
+        <ul className={appearFromTop ? styles.gradeoptions : styles.options}>
           {filteredOptions.length > 0 ? (
             filteredOptions.map((option) => (
               <li
@@ -110,6 +111,7 @@ type SelectProps = {
   placeholder: string;
   value: string[];
   onChange: (selectedOptions: string[]) => void;
+  appearFromTop?: boolean;
 };
 
 export default MultiSelect;
diff --git a/client/src/modules/Course/Components/ReviewModal.tsx b/client/src/modules/Course/Components/ReviewModal.tsx
index 6684d5d6..3026136b 100644
--- a/client/src/modules/Course/Components/ReviewModal.tsx
+++ b/client/src/modules/Course/Components/ReviewModal.tsx
@@ -234,6 +234,7 @@ const ReviewModal = ({
               value={selectedMajors}
               onChange={onMajorChange}
               placeholder="Major"
+              appearFromTop={true}
             />
             <SingleSelect
               options={gradeoptions}
diff --git a/client/src/modules/Course/Components/SingleSelect.tsx b/client/src/modules/Course/Components/SingleSelect.tsx
index 1a2c5dc9..d1fa334e 100644
--- a/client/src/modules/Course/Components/SingleSelect.tsx
+++ b/client/src/modules/Course/Components/SingleSelect.tsx
@@ -8,7 +8,8 @@ const SingleSelect = ({
   value,
   options,
   placeholder,
-  onChange
+  onChange,
+  appearFromTop=true
 }: SelectProps) => {
   const [highlightedIndex, setHighlightedIndex] = useState<number>(0);
   const [open, setOpen] = useState<boolean>(false);
@@ -51,7 +52,7 @@ const SingleSelect = ({
         />
       </div>
       {open && (
-        <ul className={styles.gradeoptions}>
+        <ul className={appearFromTop ? styles.gradeoptions : styles.options}>
           {options.map((option, index) => (
             <li
               className={`${styles.option} ${
@@ -79,6 +80,7 @@ type SelectProps = {
   placeholder: string;
   value: string;
   onChange: (selectedOptions: string) => void;
+  appearFromTop?: boolean;
 };
 
 export default SingleSelect;
diff --git a/client/src/modules/Course/Styles/ReviewModal.module.css b/client/src/modules/Course/Styles/ReviewModal.module.css
index bfaf72db..a675609c 100644
--- a/client/src/modules/Course/Styles/ReviewModal.module.css
+++ b/client/src/modules/Course/Styles/ReviewModal.module.css
@@ -16,13 +16,15 @@
   flex-flow: column nowrap;
   justify-content: center;
 
-  overflow: hidden;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 16px;
 }
 
 .modal {
   width: 80%;
   max-width: 900px;
-  max-height: 564px;
+  max-height: 90vh;
   place-self: center;
 
   background-color: white;
@@ -31,10 +33,15 @@
 
   z-index: 201;
   padding: 32px;
-  box-shadow: inset;
 
   position: relative;
-  top: 0;
+
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+
+.modal::-webkit-scrollbar {
+  display: none;
 }
 
 .closeicon {
@@ -72,20 +79,16 @@
 
   .modal {
     width: 100%;
+    height: 100%;
     min-height: 100vh;
 
-    overflow-y: auto;
-
-    height: 100%;
-    bottom: 0;
     overflow: auto;
     border-radius: 0;
-    margin: 0px;
-
-    padding: 100px 32px;
+    margin: 0;
 
     z-index: 100;
 
+    padding: 100px 32px;
     position: fixed;
     top: 0;
     right: 0;
@@ -115,14 +118,15 @@
   height: 100%;
 
   max-width: 456px;
+  max-height: 100%;
 
   place-self: center;
 }
 
 .textinputbox {
   width: 100%;
-  height: 100%;
   max-width: 456px;
+  max-height: 100%;
   height: 355px;
   border-radius: 10px;
   border: 0.5px solid #65acff;