Fix tap targets in header menu

components/AboutModal/index.tsx

@@ -8,7 +8,9 @@ const AboutModal = () => {
     return (
         <Dialog.Root>
             <Dialog.Trigger asChild>
-                <li className="MenuItem">About</li>
+                <li className="MenuItem">
+                    <span>About</span>
+                </li>
             </Dialog.Trigger>
             <Dialog.Portal>
                 <Dialog.Content className="About Dialog" onOpenAutoFocus={ (event) => event.preventDefault() }>

components/HeaderMenu/index.scss

@@ -11,7 +11,6 @@
 .MenuItem {
     color: $grey-10;
     font-weight: $normal;
-    padding: 12px;
 
     &:hover {
         background: $grey-100;
@@ -26,6 +25,11 @@
     a {
         color: $grey-10;
     }
+
+    a, span {
+        display: block;
+        padding: 12px;
+    }
 }
 
 .MenuGroup {

components/HeaderMenu/index.tsx

@@ -47,8 +47,12 @@ const HeaderMenu = (props: Props) => {
                     </div>
                     <div className="MenuGroup">
                         <AboutModal />
-                        <li className="MenuItem">Settings</li>
+                        <li className="MenuItem">
-                        <li className="MenuItem" onClick={props.logout}>Logout</li>
+                            <span>Settings</span>
+                        </li>
+                        <li className="MenuItem" onClick={props.logout}>
+                            <span>Logout</span>
+                        </li>
                     </div>
                 </ul>
             </nav>
@@ -71,13 +75,18 @@ const HeaderMenu = (props: Props) => {
                         </li>
                     </div>
                 <div className="MenuGroup">
-                    <li className="MenuItem" onClick={openLoginModal}>Log in</li>
+                    <li className="MenuItem" onClick={openLoginModal}>
+                        <span>Log in</span>
+                    </li>
                     {loginOpen ? (
                         <LoginModal 
                             close={closeLoginModal}
                         />
                     ) : null}
-                    <li className="MenuItem" onClick={openSignupModal}>Sign up</li>
+
+                    <li className="MenuItem" onClick={openSignupModal}>
+                        <span>Sign up</span>
+                    </li>
                     {signupOpen ? (
                         <SignupModal 
                             close={closeSignupModal}