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:
1 parent
a9a6a975a9
commit
4ea8eaca04
2 files changed
+7
-7
No files matched your search
+4
-4
@@ -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>
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in new issue
Block a user