fix(css): fix glitches on mobile in Navigation component

natterstefan · Apr 14, 2021 · 8e3ee8f · 8e3ee8f
1 parent 45f9e81
commit 8e3ee8f
Showing 1 changed file with 3 additions and 6 deletions.
diff --git a/src/components/navigation/Navigation.tsx b/src/components/navigation/Navigation.tsx
@@ -15,11 +15,8 @@ export const Navigation = () => {
   const { t } = useTranslation()
 
   return (
-    <nav className="flex items-center justify-between p-8">
-      <ul
-        className="flex items-center justify-between space-x-4"
-        data-cy="home-links"
-      >
+    <nav className="flex flex-wrap items-center justify-between gap-4 p-8">
+      <ul className="flex items-center gap-4" data-cy="home-links">
         <li>
           <Link href="/" locale="en">
             <a className="text-blue-500 no-underline">
@@ -35,7 +32,7 @@ export const Navigation = () => {
           </Link>
         </li>
       </ul>
-      <ul className="flex items-center justify-between space-x-4">
+      <ul className="flex flex-wrap items-center gap-4">
         {links.map(({ href, label }) => (
           <li key={`${href}${label}`}>
             <a