https://checkmate.social
PlayerBar: shrink-0 avatars and tighter mobile gap
Avatars and color placeholders bump from h-8 to h-9 and gain shrink-0
so they don't collapse when the action slot is busy at narrow widths.
Outer gap drops to gap-2 on mobile (md:gap-3 on desktop) so a two-button
action group doesn't push the clock against the name.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
+3
-3
+3
-3
client/src/components/game/PlayerBar.tsx
+3
-3
client/src/components/game/PlayerBar.tsx
···
32
32
}: PlayerBarProps) {
33
33
return (
34
34
<div
35
-
className={`flex items-center gap-3 rounded-lg px-3 py-2 transition-colors ${
35
+
className={`flex items-center gap-2 rounded-lg px-3 py-2 transition-colors md:gap-3 ${
36
36
isActive
37
37
? 'border border-felt-600/60 bg-wood-700'
38
38
: 'border border-transparent bg-wood-800'
···
43
43
<img
44
44
src={avatarUrl}
45
45
alt={displayName}
46
-
className="h-8 w-8 rounded-full ring-1 ring-wood-600"
46
+
className="h-9 w-9 shrink-0 rounded-full ring-1 ring-wood-600"
47
47
/>
48
48
) : (
49
49
<div
50
-
className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold ${
50
+
className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-sm font-bold ${
51
51
color === 'white'
52
52
? 'bg-wood-200 text-wood-800'
53
53
: 'bg-wood-700 text-wood-200'