Fix: Improve search text wrapping and spacing

This commit is contained in:
gpt-engineer-app[bot]
2025-09-30 12:03:15 +00:00
parent 0d71e99203
commit 50aa55ecbe
5 changed files with 30 additions and 29 deletions

View File

@@ -31,9 +31,9 @@ export function Header() {
return (
<>
<header className="sticky top-0 z-40 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
<div className="container flex h-14 md:h-16 items-center justify-between px-3 md:px-4">
<div className="container flex h-14 md:h-16 items-center justify-between gap-2 md:gap-4 px-3 md:px-4">
{/* Mobile: Menu + Logo */}
<div className="flex items-center gap-2 md:gap-6 flex-1 md:flex-initial">
<div className="flex items-center gap-2 md:gap-6 flex-1 md:flex-initial min-w-0">
{/* Mobile Menu */}
<Sheet open={open} onOpenChange={setOpen}>
<SheetTrigger asChild>
@@ -108,8 +108,8 @@ export function Header() {
</Sheet>
{/* Logo */}
<Link to="/" className="flex items-center hover:opacity-80 transition-opacity">
<span className="font-bold text-lg md:text-xl bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
<Link to="/" className="flex items-center hover:opacity-80 transition-opacity flex-shrink-0">
<span className="font-bold text-base sm:text-lg md:text-xl bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent whitespace-nowrap">
ThrillWiki
</span>
</Link>
@@ -215,9 +215,9 @@ export function Header() {
</div>
{/* Right side: Search, Theme, Auth */}
<div className="flex items-center gap-1 md:gap-2">
<div className="flex items-center gap-1.5 md:gap-2 flex-shrink-0">
{/* Desktop Search */}
<div className="hidden lg:block w-80 xl:w-96">
<div className="hidden lg:block lg:w-64 xl:w-80 min-w-0">
<SearchDropdown />
</div>
@@ -225,7 +225,7 @@ export function Header() {
<Button
variant="ghost"
size="icon"
className="lg:hidden h-9 w-9"
className="lg:hidden h-9 w-9 min-w-[36px]"
onClick={() => setMobileSearchOpen(true)}
>
<Search className="h-5 w-5" />