👁️
tigher mobile layout for header
+8
-6
+8
-6
src/components/Header.tsx
+8
-6
src/components/Header.tsx
···
19
19
20
20
return (
21
21
<>
22
-
<header className="p-4 flex items-center bg-gray-800 dark:bg-gray-900 text-white shadow-lg">
22
+
<header className="p-2 sm:p-4 flex items-center bg-gray-800 dark:bg-gray-900 text-white shadow-lg">
23
23
<div className="flex items-center">
24
24
<button
25
25
type="button"
···
29
29
>
30
30
<Menu size={24} />
31
31
</button>
32
-
<h1 className="ml-4 text-xl font-semibold">
32
+
<h1 className="ml-2 sm:ml-4 text-lg sm:text-xl font-semibold hidden sm:block">
33
33
<Link to="/">DeckBelcher</Link>
34
34
</h1>
35
35
</div>
36
36
37
-
<div className="flex-1 flex justify-center px-4">
37
+
<div className="flex-1 flex justify-center px-2 sm:px-4">
38
38
<Link
39
39
to="/cards"
40
40
search={{ q: "", sort: undefined }}
41
-
className="flex items-center gap-2 px-4 py-2 bg-cyan-600 hover:bg-cyan-700 rounded-lg transition-colors text-white text-sm font-medium"
41
+
className="flex items-center gap-2 px-3 sm:px-4 py-2 bg-cyan-600 hover:bg-cyan-700 rounded-lg transition-colors text-white text-sm font-medium"
42
42
>
43
43
<Search size={18} />
44
44
<span className="hidden sm:inline">Search Cards</span>
···
57
57
<Link
58
58
to="/signin"
59
59
onClick={handleSignInClick}
60
-
className="flex items-center gap-2 px-3 py-2 bg-cyan-600 hover:bg-cyan-700 rounded-lg transition-colors"
60
+
className="flex items-center gap-2 px-2 sm:px-3 py-2 bg-cyan-600 hover:bg-cyan-700 rounded-lg transition-colors"
61
61
>
62
62
<LogIn size={16} />
63
-
<span className="text-sm font-medium">Sign In</span>
63
+
<span className="text-sm font-medium hidden sm:inline">
64
+
Sign In
65
+
</span>
64
66
</Link>
65
67
)}
66
68
<button