Repository navigation
fix: refine mention badge layout and add missing-avatar fallback - #1160
brendenchu wants to merge 2 commits into
Conversation
|
No actionable comments were generated in the recent review.
 |
| Layer / File(s) | Summary |
|---|---|
Badge presentation and avatar fallback resources/js/components/bio-text.tsx |
The badge styling changed. The avatar container provides an @ fallback marked aria-hidden. If the image errors, the component hides it to reveal the fallback. |
Priority:
Estimated code review effort: 1 (Trivial) | ~5 minutes
Change: Bug fix
Possibly related PRs
- dev-null-sh/dev-null.sh#1156: Updates the GitHub identity field used by the same component.
Suggested reviewers: xheaven, 0z3
Merge Risk: 
60104
-
The mention badge preserves copied handle text and provides the intended decorative avatar fallback without an established merge-blocking risk.
Pre-merge checks: 
-
Check name Status Explanation Description Check Check skipped - CodeRabbit’s high-level summary is enabled. Title check The title names the two main changes: the refined mention badge layout and the missing-avatar fallback. Both appear in the file summary (bio-text.tsx badge layout changes and the aria-hidden avatar @ … Docstring Coverage Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 1 files. Linked Issues check Check skipped because no linked issues were found for this pull request. Out of Scope Changes check Check skipped because no linked issues were found for this pull request. Full details: Title check
-
Explanation
The title names the two main changes: the refined mention badge layout and the missing-avatar fallback. Both appear in the file summary (bio-text.tsx badge layout changes and the aria-hidden avatar @ fallback) and in the PR objectives. The title is concise, specific, and follows the conventional prefix style. It does not mention the remount on URL change or truncation, but those are secondary details.
-
Finishing Touches
-
🧪 Generate unit tests (beta)
-
- Create a new PR
-
- Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
Comment @coderabbitai help to get the list of available commands.
Summary
GitHub mention badges in bios and company fields had uneven horizontal padding and a text baseline offset from the surrounding prose. Tighten the badge proportions, align the username baseline with the text, and show an
@fallback when an avatar cannot load.Changes
@when an avatar fails, preserving copied mention text. Remount the image when its GitHub URL changes so a previous failure cannot hide a new avatar.The shared component renders profile bios, company fields, sidebar bios, and preview bios. No preview content, database changes, or screenshot assets are included in this code branch.
Validation
Local validation completed successfully in Docker. The local development image includes OpenSSH and a named user matching its configured UID/GID; the test environment explicitly sets the upstream repository expected by the GitHub mocks. These environment fixes are outside this application PR.
docker compose -f compose.yaml build app docker compose -f compose.yaml config --quiet docker compose -f compose.yaml run --rm --no-deps \ -e APP_ENV=testing -e DB_DATABASE=testing -e DB_URL= \ -e CACHE_STORE=array -e SESSION_DRIVER=array -e MAIL_MAILER=array \ -e INERTIA_SSR_ENABLED=false \ -e GITHUB_REPOSITORY=dev-null-sh/dev-null.sh \ -e XDEBUG_MODE=coverage app composer testcomposer test— passed, exit 0.docker compose -f compose.yaml run --rm --no-deps app bun x vp test run tests/Unit/BioText.test.tsx— 4 tests passed.docker compose -f compose.yaml run --rm --no-deps app bun x vp lint resources/js/components/bio-text.tsx— no warnings or errors.git diff --check— passed.Headless Chrome checked the same seeded guest profile before and after, in both themes at 1440×1000 and 390×1000. A baseline probe measured the first mention's offset from the prose at 0.828125px before and 0px after in all four configurations. Computed bio line-height remained 24.375px and badge height remained 21.609375px. No horizontal viewport overflow was observed. The company-row alignment causes a small, approximately 2px upward shift in following content; this is not a claim of zero layout change globally.
Visual evidence
Before/after screenshots of the same seeded guest profile, independently reviewed as media revision
capture-v1. Before:3ceaefa6745d8fa5d6376213521221b44136bd4b. After:1a30db3428d5ffec70272b040ab055d82c4d5ab4. Assets are hosted separately from the code branch at commit55a68da7775146c05fd3a4328d452003ae9af4ba.Simulated avatar failure, desktop dark: GitHub avatar requests were aborted. The image became hidden and the CSS
@remained visible without a broken-image indicator.Captured layout metrics. No recording was captured; the change concerns static badge rendering.
Device verification
Headless Google Chrome 156.0.8078.47 on macOS 27.0.1, desktop and mobile viewport emulation; no physical-device or simulator testing. Captures use fresh page loads, with a reload for the simulated avatar failure. There are no new input fields or primary actions. On-screen keyboard, notch/safe-area hardware, touch interactions, scrolling, and client-side transitions were not verified.
Independent review
Independent Codex reviewer
/root/review_badge: CODE: PASS, VISUAL: PASS for base3ceaefa6745d8fa5d6376213521221b44136bd4b→ head1a30db3428d5ffec70272b040ab055d82c4d5ab4, mediacapture-v1/55a68da7775146c05fd3a4328d452003ae9af4ba.The reviewer examined the component, all four callers, existing tests, all nine screenshots, and captured layout metrics. Review identified and resolved stale hidden-image styling on username changes by keying the image by its URL. No remaining findings within that scope.
Limitations
productionwas64ab4a65c2353ed0e633cb6c2805e4565ea58603when preparing the PR; its two intervening commits do not edit this component.Summary by CodeRabbit