[update] fixing a UI bug on mobile

website/components/ui/modals/hamburger.tsx

@@ -3,16 +3,16 @@ import Link from "next/link";
 import { useLanguage } from "contexts/language";
 
 export const HamburgerMenuElement = ({ href, name, ...props }: any) => {
-    return <div className="w-full h-16 p-5 text-xl items-center flex cursor-pointer hover:bg-slate-100 transition" {...props}>
-        <Link href={href}>
+    return <Link href={href}>
+        <div className="w-full h-16 p-5 text-xl items-center flex cursor-pointer hover:bg-slate-100 transition" {...props}>
             {name}
-        </Link>
-    </div>
+        </div>
+    </Link>
 }
 
 export const HamburgerModal = ({ onClose, ...props }) => {
     const { strings } = useLanguage();
-    return <div className="h-screen animate-enter-menu w-4/5 z-10 right-0 absolute bg-white shadow-xl flex flex-col space-y-5 items-center sm:hidden">
+    return <div className="h-screen animate-enter-menu w-4/5 z-10 right-0 fixed bg-white shadow-xl flex flex-col space-y-5 items-center sm:hidden">
         <CloseIcon className="absolute top-0 right-0 mx-10 cursor-pointer opacity-60 hover:opacity-100 transition" onClick={() => { onClose(); }} />
         {/* <span className="text-xl justify-center">Menu</span> */}
         <div className="h-5"></div>

website/pages/translate.tsx

@@ -91,7 +91,7 @@ const Translate: NextPage = () => {
             <meta name="description" content="Use multiple services to translate your texts!" />
             <link rel="icon" href="/favicon.ico" />
         </Head>
-        <div className="p-16">
+        <div className="sm:p-16 p-5">
             {
                 (results.length > 0 && results[0].success)
                     ? <MainResult onNewTranslation={setCurrentTranslation} result={results[0]} />