Merge pull request 'fixed game list issue not appearing in mod submit + temp-fixed its scroll and style ux' (#8) from staging into master

Reviewed-on: #8

src/components/ModForm.tsx

@@ -780,7 +780,7 @@ const GameDropdown = ({
         can add it.
       </p>
       <div className='dropdown dropdownMain'>
-        <div className='inputWrapperMain'>
+        <div className='inputWrapperMain inputWrapperMainAlt'>
           <input
             ref={inputRef}
             type='text'
@@ -812,7 +812,7 @@ const GameDropdown = ({
               <path d='M480 416C497.7 416 512 430.3 512 448C512 465.7 497.7 480 480 480H150.6C133.7 480 117.4 473.3 105.4 461.3L25.37 381.3C.3786 356.3 .3786 315.7 25.37 290.7L258.7 57.37C283.7 32.38 324.3 32.38 349.3 57.37L486.6 194.7C511.6 219.7 511.6 260.3 486.6 285.3L355.9 416H480zM265.4 416L332.7 348.7L195.3 211.3L70.63 336L150.6 416L265.4 416z'></path>
             </svg>
           </button>
-          <div className='dropdown-menu dropdownMainMenu'>
+          <div className='dropdown-menu dropdownMainMenu dropdownMainMenuAlt'>
             <List
               height={500}
               width={'100%'}

src/styles/styles.css

@@ -246,6 +246,34 @@ h6 {
   font-size: 16px;
 }
 
+/* the 4 classes below here are a temp fix for the games dropdown stylings */
+
+.dropdownMainMenu.dropdownMainMenuAlt {
+  max-height: unset!important;
+
+}
+
+.dropdownMainMenu.dropdownMainMenuAlt > div {
+    height: unset!important;
+}
+
+.dropdownMainMenu.dropdownMainMenuAlt > div > div {
+    height: unset!important;
+    width: 100%!important;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    max-height: 300px;
+    overflow: auto;
+    padding: 5px;
+}
+
+.dropdownMainMenu.dropdownMainMenuAlt > div > div > div {
+    position: relative!important;
+    left: unset!important;
+    top: unset!important;
+}
+
 .dropdownMainMenuItem {
   transition: ease 0.4s;
   background: linear-gradient(
@@ -311,6 +339,10 @@ h6 {
   border-radius: 10px;
 }
 
+.inputWrapperMain.inputWrapperMainAlt {
+  overflow: unset;
+}
+
 .inputWrapperMainWrapper {
   width: 100%;
   display: flex;