From 4ea8eaca04baa6f818a57ee34c50d303b96851d6 Mon Sep 17 00:00:00 2001
From: neodk2004 <barac.daniel@gmail.com>
Date: Fri, 14 Aug 2026 15:39:29 +0200
Subject: [PATCH] fix(landing): fix mobile header overflow and a 768px tablet
 overflow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Mobile (<640px): the sign-up button was ~50% offscreen. The header
crammed logo + theme toggle + full LanguageSwitcher (globe icon +
"Sprache:" label + 2 flag buttons) + sign-up pill into a narrow
viewport. Collapsed LanguageSwitcher to icon-only flags below sm,
tightened header padding/gaps, and reduced the sign-up button's
mobile padding. Verified via Chrome DevTools viewport emulation at
320px and 375px — button fully visible at both.

While verifying, found a second, seemingly pre-existing overflow at
exactly 768px (the md: breakpoint): the desktop nav links (Home/Über
uns/Impressum) plus the full-size right-side group don't fit in that
width, cutting off the sign-up button again and causing horizontal
scroll. Moved the nav links from md:flex to lg:flex so they only
appear once there's actually room (confirmed clean at 768px and
1024px+).
---
 src/app/page.tsx                         | 8 ++++----
 src/components/i18n/LanguageSwitcher.tsx | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8a20ccd..57cb6c2 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -48,14 +48,14 @@ export default async function RootPage() {
   return (
     <div className="min-h-screen bg-background">
       {/* Navbar */}
-      <header className="sticky top-0 z-20 border-b border-border/60 bg-background/80 px-6 py-4 backdrop-blur-md sm:px-10">
+      <header className="sticky top-0 z-20 border-b border-border/60 bg-background/80 px-4 py-4 backdrop-blur-md sm:px-6 lg:px-10">
         <div className="mx-auto flex max-w-6xl items-center justify-between">
           <div className="flex items-center gap-2">
             <PawPrint className="h-6 w-6 text-orange-500" fill="currentColor" strokeWidth={0} aria-hidden="true" />
             <span className="text-lg font-bold text-foreground">PawFeed</span>
           </div>
 
-          <nav className="hidden items-center gap-6 text-sm font-medium text-muted-foreground md:flex">
+          <nav className="hidden items-center gap-6 text-sm font-medium text-muted-foreground lg:flex">
             {navLinks.map((link) =>
               link.href ? (
                 <Link key={link.label} href={link.href} className="transition-colors hover:text-foreground">
@@ -72,7 +72,7 @@ export default async function RootPage() {
             )}
           </nav>
 
-          <div className="flex items-center gap-3">
+          <div className="flex items-center gap-1 sm:gap-3">
             <ThemeToggleButton />
             <LanguageSwitcher />
             <Link
@@ -83,7 +83,7 @@ export default async function RootPage() {
             </Link>
             <Link
               href="/sign-up"
-              className="inline-flex items-center justify-center rounded-full bg-orange-500 px-4 py-2 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-orange-600"
+              className="inline-flex items-center justify-center whitespace-nowrap rounded-full bg-orange-500 px-3 py-2 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-orange-600 sm:px-4"
             >
               {t("navSignUp")}
             </Link>
diff --git a/src/components/i18n/LanguageSwitcher.tsx b/src/components/i18n/LanguageSwitcher.tsx
index 1e20159..40d9bad 100644
--- a/src/components/i18n/LanguageSwitcher.tsx
+++ b/src/components/i18n/LanguageSwitcher.tsx
@@ -25,9 +25,9 @@ export function LanguageSwitcher() {
   }
 
   return (
-    <div className="flex items-center gap-1 px-2 py-1.5 rounded-md text-muted-foreground">
-      <Globe className="h-3.5 w-3.5 shrink-0" />
-      <span className="text-xs">{t("switch")}:</span>
+    <div className="flex items-center gap-1 px-1 py-1.5 sm:px-2 rounded-md text-muted-foreground">
+      <Globe className="hidden sm:block h-3.5 w-3.5 shrink-0" />
+      <span className="hidden sm:inline text-xs">{t("switch")}:</span>
       {LOCALES.map((l) => (
         <button
           key={l.code}