Fixes mobile tap targets (vercel#1129)

Co-authored-by: Lee Robinson <[email protected]>
thomasledoux1 · Jul 31, 2023 · 455a732 · 455a732
1 parent 10b1d4b
commit 455a732
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 14 deletions.
diff --git a/components/layout/footer-menu.tsx b/components/layout/footer-menu.tsx
@@ -15,11 +15,11 @@ const FooterMenuItem = ({ item }: { item: Menu }) => {
   }, [pathname, item.path]);
 
   return (
-    <li className="mt-2 first:mt-1">
+    <li>
       <Link
         href={item.path}
         className={clsx(
-          'underline-offset-4 hover:text-black hover:underline dark:hover:text-neutral-300',
+          'block p-2 text-lg underline-offset-4 hover:text-black hover:underline dark:hover:text-neutral-300 md:inline-block md:text-sm',
           {
             'text-black dark:text-neutral-300': active
           }

diff --git a/components/layout/footer.tsx b/components/layout/footer.tsx
@@ -19,7 +19,7 @@ export default async function Footer() {
     <footer className="text-sm text-neutral-500 dark:text-neutral-400">
       <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 border-t border-neutral-200 px-6 py-12 text-sm dark:border-neutral-700 md:flex-row md:gap-12 md:px-4 xl:px-0">
         <div>
-          <Link className="flex items-center gap-2 text-black dark:text-white" href="/">
+          <Link className="flex items-center gap-2 text-black dark:text-white md:pt-1" href="/">
             <LogoSquare size="sm" />
             <span className="uppercase">{SITE_NAME}</span>
           </Link>
@@ -40,7 +40,7 @@ export default async function Footer() {
         </Suspense>
         <div className="md:ml-auto">
           <a
-            className="flex items-center gap-2 hover:text-black dark:hover:text-neutral-300"
+            className="flex items-center gap-2 text-lg hover:text-black dark:hover:text-neutral-300 md:text-sm"
             aria-label="Github Repository"
             href="https://github.com/vercel/commerce"
           >

diff --git a/components/layout/navbar/mobile-menu.tsx b/components/layout/navbar/mobile-menu.tsx
@@ -32,8 +32,12 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
 
   return (
     <>
-      <button onClick={openMobileMenu} aria-label="Open mobile menu" className="md:hidden">
-        <Bars3Icon className="h-6" />
+      <button
+        onClick={openMobileMenu}
+        aria-label="Open mobile menu"
+        className="flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white md:hidden"
+      >
+        <Bars3Icon className="h-4" />
       </button>
       <Transition show={isOpen}>
         <Dialog onClose={closeMobileMenu} className="relative z-50">
@@ -59,22 +63,25 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
           >
             <Dialog.Panel className="fixed bottom-0 left-0 right-0 top-0 flex h-full w-full flex-col bg-white pb-6 dark:bg-black">
               <div className="p-4">
-                <button className="mb-4" onClick={closeMobileMenu} aria-label="Close mobile menu">
+                <button
+                  className="mb-4 flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white"
+                  onClick={closeMobileMenu}
+                  aria-label="Close mobile menu"
+                >
                   <XMarkIcon className="h-6" />
                 </button>
 
                 <div className="mb-4 w-full">
                   <Search />
                 </div>
                 {menu.length ? (
-                  <ul className="flex flex-col">
+                  <ul className="flex w-full flex-col">
                     {menu.map((item: Menu) => (
-                      <li key={item.title}>
-                        <Link
-                          href={item.path}
-                          className="rounded-lg py-1 text-xl text-black transition-colors hover:text-neutral-500 dark:text-white"
-                          onClick={closeMobileMenu}
-                        >
+                      <li
+                        className="py-2 text-xl text-black transition-colors hover:text-neutral-500 dark:text-white"
+                        key={item.title}
+                      >
+                        <Link href={item.path} onClick={closeMobileMenu}>
                           {item.title}
                         </Link>
                       </li>