fix(landing): fix mobile header overflow and a 768px tablet overflow

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+).
This commit is contained in:
admin committed 2026-08-14 15:39:29 +02:00
1 parent a9a6a975a9
commit 4ea8eaca04
2 files changed
+7 -7

No files matched your search

+4 -4
View File
@@ -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>
+3 -3
View File
@@ -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}