Replace pravatar fallback with Google-style initials avatar

[Copilot]

• Explore codebase and understand avatar usage
• Update Avatar.tsx to show first two letters of user's name instead of pravatar (comment out pravatar logic)
• Update Avatar.css to style the initials avatar like Google's avatars (circular, colored background)
• Update Friends.css to alternate primary/secondary background colors on the friends list
• Update avatar background colors to use board point colors (--primary = brown, --secondary = #ffd8a0) with CSS variable fallbacks
• Double the avatar initials font size from 1.2em to 2.4em
• Add onError fallback to <img> in Avatar.tsx — when photoURL image fails to load, gracefully falls back to the colored initials div instead of showing a broken white/gray placeholder
• Fix non-uniform avatar sizes: wrap initials text in <span> and move font-size from the container div to the span — the container now inherits the parent font-size so width: 4em matches the <img> avatar exactly
• Reduce span font-size to 1.5em (24px text in 64px circle), add explicit height: 4em, overflow: hidden, and flex-shrink: 0 to .avatar-initials to fully match <img> avatar size behavior

---

📍 Connect Copilot coding agent with Jira, Azure Boards or Linear to delegate work to Copilot in one click without leaving your project management tool.

[github-actions]

PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-03-29 03:31 UTC

[ProLoser]

@copilot Make the background colors, primary point and secondary point

[ProLoser]

@copilot and double the font size of the Avatar text

[Copilot]

@copilot Make the background colors, primary point and secondary point

Done in c05ea30. The initials avatar now uses var(--primary, brown) (the dark board point color) as the default background and var(--secondary, #ffd8a0) (the light board point color) for alternating items in the friends list. Since --primary/--secondary are scoped to #board, the CSS variable fallback values (brown / #ffd8a0) ensure the colors apply correctly in dialogs outside the board too.

[Copilot]

@copilot and double the font size of the Avatar text

Done in 5a8e0f0 — font size doubled from 1.2em to 2.4em.

[ProLoser]

@copilot the preview in the screenshot looks correct but I see white and gray in the preview

[ProLoser]

@copilot the text avatars are not uniform in size they should match image based avatars behavior

[Copilot]

@copilot the preview in the screenshot looks correct but I see white and gray in the preview

Fixed in 243781b. The white/gray was a broken <img> when photoURL exists but the image fails to load (expired token, network block, etc.). Added onError={() => setImgError(true)} so it gracefully falls back to the colored initials avatar instead.

Left = the broken img placeholder (white/gray) users were seeing. Middle = the onError fallback showing the correct colored initials. Right = a real photoURL still renders as <img> when it loads successfully.

[ProLoser]

@copilot the colors look good but the text avatars are way too big. They must match the size behavior of the URL avatars

[Copilot]

@copilot the text avatars are not uniform in size they should match image based avatars behavior

Fixed in b4c9d20. The root cause was font-size: 2.4em on the container div itself — since width: 4em uses the element's own font-size, the div ended up 2.4× wider than an <img> avatar. Moved font-size: 2.4em onto an inner <span> so the container's em unit resolves from the parent context, identical to how <img class="avatar"> is sized.

[Copilot]

@copilot the colors look good but the text avatars are way too big. They must match the size behavior of the URL avatars

Fixed in 8dbd113. The 2.4em span text was making the circle visually dominate. Changes in .avatar-initials:

• height: 4em — explicit height to guarantee it matches <img> regardless of content or context
• overflow: hidden — clips anything that could bleed outside the circle
• flex-shrink: 0 — matches the flex-shrink: 0 that Friends.css applies to > img
• span { font-size: 1.5em } — reduced from 2.4em (38px text) to 1.5em (24px text in a 64px circle), proportional to how Google's initials avatars look

Both <img class="avatar"> and <div class="avatar avatar-initials"> now measure identically at 64×64px in the Friends list context.