[CAN-143] Fix Language Switcher Position

Problem
- Language Switcher on drawer nav not positioned properly
Solution
- Adjust height and width of container to be in 100%
- Change position from relative to absolute of parent
- Switch Language Switcher to display none instead of invisible
    - Removes left margin noticed on Language switcher element
Note

app/components/OverlayNav/Overlaynav.tsx

@@ -73,28 +73,32 @@ export default function OverlayNav({
             isOpen={showOverlay}
             closeButtonColor='white'
         >
-            <div className='p-3 bg-gray-700 h-[100vh]'>
-                <div className='flex flex-row justify-between items-center text-[#B6CF54]'>
-                    <Logo onClick={closeOverlay} />
+            <div className='flex flex-col p-3 justify-between bg-gray-700 h-full absolute w-full'>
+                <div>
+                    <div className='flex flex-row justify-between items-center text-[#B6CF54]'>
+                        <Logo onClick={closeOverlay} />
+                    </div>
+                    <div className='flex flex-col justify-start items-start my-10 font-bold text-[1.6rem] text-[rgba(130,130,130,0.6)]'>
+                        {links.map((link: LinkInfo) => (
+                            <Link
+                                key={'mobile_' + link.name}
+                                href={link.href}
+                                onClick={(e) =>
+                                    handleClick(e, link.href as string)
+                                }
+                                className={
+                                    (link.href.toString().includes(pathname) &&
+                                    !isHomePage
+                                        ? `text-[#B6CF54] `
+                                        : `text-white `) + ' min-w-full py-2 '
+                                }
+                            >
+                                {link.name as string}
+                            </Link>
+                        ))}
+                    </div>
                 </div>
-                <div className='flex flex-col justify-start items-start my-10 font-bold text-[1.6rem] text-[rgba(130,130,130,0.6)]'>
-                    {links.map((link: LinkInfo) => (
-                        <Link
-                            key={'mobile_' + link.name}
-                            href={link.href}
-                            onClick={(e) => handleClick(e, link.href as string)}
-                            className={
-                                (link.href.toString().includes(pathname) &&
-                                !isHomePage
-                                    ? `text-[#B6CF54] `
-                                    : `text-white `) + ' min-w-full py-2 '
-                            }
-                        >
-                            {link.name as string}
-                        </Link>
-                    ))}
-                </div>
-                <div className='flex flex-row justify-end items-center text-[#828282]'>
+                <div className='flex flex-col items-start justify-end h-[auto] text-[#828282]'>
                     <LocalSwitcher />
                 </div>
             </div>

app/components/TranslationSwitch/TranslationSwitch.tsx

@@ -101,24 +101,24 @@ export default function LocalSwitcher() {
     );
 
     return (
-        <div className="flex">
+        <div className='flex flex-row items-center justify-center'>
             {/* Desktop */}
-            <div className="lg:visible invisible relative top-0 right-0">
+            <div className='lg:block hidden'>
                 {dropdownTrigger}
                 {showDropdownContent && dropDownContent}
             </div>
 
             {/* Mobile and Tablet: Positioned at the bottom left */}
-            <div className="lg:invisible visible absolute bottom-5 left-5">
-                <p className="sr-only">change language</p>
+            <div className='lg:hidden block'>
+                <p className='sr-only'>change language</p>
                 <select
                     defaultValue={localeActive}
-                    className="py-2 w-full rounded-lg"
+                    className='py-2 w-full rounded-lg'
                     onChange={changeLocaleMobile}
                     disabled={isPending}
                 >
-                    <option value="en">🇬🇧 English</option>
-                    <option value="de">🇩🇪 Deutsch</option>
+                    <option value='en'>🇬🇧 English</option>
+                    <option value='de'>🇩🇪 Deutsch</option>
                 </select>
             </div>
         </div>