https://checkmate.social
Header: truncate long display names, bump sign-out tap target to 44px
Adds min-w-0 on flex parents (without which truncate is a no-op inside
flex), truncate + ellipsis on the display name, and min-h-[44px] on the
sign-out button so the hit area meets Apple HIG's 44px floor on touch
devices. Visual chrome unchanged.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
+8
-8
+8
-8
client/src/components/layout/Header.tsx
+8
-8
client/src/components/layout/Header.tsx
···
10
10
const { connected } = useGame();
11
11
12
12
return (
13
-
<header className="flex items-center justify-between border-b border-wood-700 bg-wood-900/90 px-5 py-3 backdrop-blur-sm">
13
+
<header className="flex items-center justify-between border-b border-wood-700 bg-wood-900/90 px-4 py-3 backdrop-blur-sm md:px-5">
14
14
{/* Branding */}
15
-
<div className="flex items-center gap-2.5">
15
+
<div className="flex min-w-0 items-center gap-2.5">
16
16
<span className="select-none text-lg text-gold-500">♔</span>
17
17
<h1 className="font-serif text-xl font-bold tracking-tight text-gold-400">
18
18
Checkmate
19
19
</h1>
20
20
<div
21
-
className={`ml-0.5 h-1.5 w-1.5 rounded-full transition-colors ${connected ? 'bg-felt-500' : 'bg-red-500'}`}
21
+
className={`ml-0.5 h-1.5 w-1.5 shrink-0 rounded-full transition-colors ${connected ? 'bg-felt-500' : 'bg-red-500'}`}
22
22
title={connected ? 'Connected' : 'Disconnected'}
23
23
/>
24
24
</div>
25
25
26
26
{/* User controls */}
27
27
{handle && (
28
-
<div className="flex items-center gap-3">
29
-
<div className="flex items-center gap-2">
28
+
<div className="flex min-w-0 items-center gap-3">
29
+
<div className="flex min-w-0 items-center gap-2">
30
30
{avatarUrl && (
31
31
<img
32
32
src={avatarUrl}
33
33
alt={displayName ?? handle}
34
-
className="h-7 w-7 rounded-full ring-1 ring-wood-600"
34
+
className="h-7 w-7 shrink-0 rounded-full ring-1 ring-wood-600"
35
35
/>
36
36
)}
37
-
<span className="text-sm text-wood-300">
37
+
<span className="min-w-0 truncate text-sm text-wood-300">
38
38
{displayName ?? handle}
39
39
</span>
40
40
</div>
41
41
<button
42
42
onClick={logout}
43
-
className="rounded px-2 py-1 text-xs text-wood-500 transition-colors hover:bg-wood-700 hover:text-wood-200"
43
+
className="flex min-h-[44px] shrink-0 items-center rounded px-3 text-xs text-wood-500 transition-colors hover:bg-wood-700 hover:text-wood-200"
44
44
>
45
45
Sign out
46
46
</button>