From 8e3ee8fea9c630c213faedcc3318d53bce3b1522 Mon Sep 17 00:00:00 2001
From: Stefan Natter <stefan@natter.at>
Date: Wed, 14 Apr 2021 20:56:51 +0200
Subject: [PATCH] fix(css): fix glitches on mobile in Navigation component

---
 src/components/navigation/Navigation.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/navigation/Navigation.tsx b/src/components/navigation/Navigation.tsx
index 098ef97..4159ae7 100644
--- 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