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).
cornell-dti · Jan 14, 2025 · 9ffe43c · 9ffe43c
1 parent 6b3fe08
commit 9ffe43c
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;