From 1a30db3428d5ffec70272b040ab055d82c4d5ab4 Mon Sep 17 00:00:00 2001
From: Brenden Chu <brenden@wavy.dev>
Date: Sun, 25 Oct 2026 18:16:49 -0700
Subject: [PATCH 1/2] fix: refine mention badge layout and add missing-avatar
 fallback

---
 resources/js/components/bio-text.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/resources/js/components/bio-text.tsx b/resources/js/components/bio-text.tsx
index 628d04bba..9cfbcb28f 100644
--- a/resources/js/components/bio-text.tsx
+++ b/resources/js/components/bio-text.tsx
@@ -12,21 +12,28 @@ function GitHubMention({ username }: { username: string }) {
             rel="noopener noreferrer nofollow ugc"
             title={href}
             aria-label={`@${username} on GitHub`}
-            className="inline-flex h-[1.55em] items-center gap-[0.3em] rounded-md border bg-muted pr-[0.55em] pl-[calc(0.2em-1px)] align-[-0.3em] text-[0.93em] font-medium whitespace-nowrap text-foreground transition-colors hover:border-primary/45 hover:bg-primary-soft hover:text-primary-hover"
+            className="inline-flex h-[1.55em] max-w-full items-baseline gap-[0.2em] rounded-[0.3em] border bg-muted px-[calc(0.2em-1px)] align-baseline text-[0.93em] font-medium whitespace-nowrap text-inherit transition-colors hover:border-primary/45 hover:bg-primary-soft hover:text-primary-hover"
             data-test="bio-mention"
         >
-            {/* A handle GitHub doesn't know has no avatar, so the broken image leaves just this placeholder. */}
-            <span className="size-[1.15em] shrink-0 overflow-hidden rounded-[calc(var(--radius-md)-0.2em)] bg-border">
+            {/* A CSS symbol keeps the fallback out of copied bio text. */}
+            <span
+                aria-hidden="true"
+                className="relative flex size-[1.15em] shrink-0 items-center justify-center self-center overflow-hidden rounded-[0.1em] bg-border before:text-[0.75em] before:leading-none before:text-muted-foreground before:content-['@']"
+            >
                 <img
+                    key={href}
                     src={`${href}.png?size=40`}
                     alt=""
                     width={20}
                     height={20}
                     loading="lazy"
-                    className="size-full"
+                    className="absolute inset-0 size-full bg-border object-cover"
+                    onError={(event) => {
+                        event.currentTarget.style.visibility = 'hidden';
+                    }}
                 />
             </span>
-            <span>
+            <span className="min-w-0 truncate py-[calc(0.275em-1px)] leading-none">
                 <span className="text-[0px]">@</span>
                 {username}
             </span>

From e852d258bb8f7ecacb25be3b8b6d5d2e587691bb Mon Sep 17 00:00:00 2001
From: Brenden Chu <brenden@wavy.dev>
Date: Thu, 29 Oct 2026 18:35:38 -0700
Subject: [PATCH 2/2] fix: hide mention avatars that failed to load before
 hydration

---
 resources/js/components/bio-text.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/resources/js/components/bio-text.tsx b/resources/js/components/bio-text.tsx
index 9875cd35a..7e0d97912 100644
--- a/resources/js/components/bio-text.tsx
+++ b/resources/js/components/bio-text.tsx
@@ -17,6 +17,12 @@ function MentionContent({ handle }: { handle: string }) {
             >
                 <img
                     key={handle}
+                    // An image that failed before hydration fires no error event React can see.
+                    ref={(element) => {
+                        if (element?.complete && element.naturalWidth === 0) {
+                            element.style.visibility = 'hidden';
+                        }
+                    }}
                     src={`https://github.com/${handle}.png?size=40`}
                     alt=""
                     width={20}