[brendenchu]

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

• Use the smaller padding equally on both sides, reduce the avatar-to-name gap, and scale both corner radii with the text.
• Align the username baseline with the surrounding prose while keeping the avatar centered.
• Inherit the surrounding text color and truncate long handles within the available width.
• Reveal a decorative CSS @ 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 test

• Full composer test — passed, exit 0.
• PHP: 4,300 tests passed, 24,126 assertions; 100% code coverage and 100% type coverage.
• Frontend: 46 test files passed, plus 162 Node tests passed, zero failures.
• Formatting and static checks completed successfully; frontend lint reported 17 warnings and zero errors.
• Focused bio component check: docker compose -f compose.yaml run --rm --no-deps app bun x vp test run tests/Unit/BioText.test.tsx — 4 tests passed.
• Focused lint: 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 commit 55a68da7775146c05fd3a4328d452003ae9af4ba.

Profile bio and company field	Before	After
Desktop, 1440×1000, light
Desktop, 1440×1000, dark
Mobile emulation, 390×1000, light
Mobile emulation, 390×1000, dark

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 base 3ceaefa6745d8fa5d6376213521221b44136bd4b → head 1a30db3428d5ffec70272b040ab055d82c4d5ab4, media capture-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

• Visual evidence covers the guest profile bio and company field. Signed-in sidebar and user-preview popover were inspected in source but not captured in-browser.
• Hover/focus states, extremely long handles, real devices, and interactive mobile behavior were not visually verified.
• Review and before screenshots use the originating branch base. Upstream production was 64ab4a65c2353ed0e633cb6c2805e4565ea58603 when preparing the PR; its two intervening commits do not edit this component.
• Hosted CI results are separate from these local checks.

Summary by CodeRabbit

• Bug Fixes
  • GitHub mentions in bios now align and truncate more consistently. Failed-to-load avatars are hidden, and copying bio text no longer includes the decorative “@” fallback.

[coderabbitai]

No actionable comments were generated in the recent review.

Recent review info

Run configuration

• Source mode: Auto
• Repository: Unavailable
• Branch: Unavailable
• File: No configuration file from this repository applied
• Commit: Unavailable
• Layers: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: 72138d5b-225d-4175-b046-2f0fc5ea8bd4

Commits

Reviewing files that changed from the base of the PR and between 64ab4a6 and 1a30db3.

Files selected for processing: 1

• resources/js/components/bio-text.tsx

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

Walkthrough

The GitHub mention badge now uses baseline-aligned, truncating styling. Its avatar container displays an @ fallback, and the avatar is hidden if loading fails.

Changes: GitHub mention badge

Layer / File(s)	Summary
Badge presentation and avatar fallback resources/js/components/bio-text.tsx	The badge uses baseline alignment, a narrower gap, and truncation. The avatar container provides an @ fallback that is excluded from copied bio text. The avatar overlays the fallback and is hidden on load error.

Priority: Low

Estimated code review effort: 2 (Simple) | ~8 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: Minimal · up to 1a30d

No blocking correctness or accessibility risks were identified in the badge changes.

Pre-merge checks: 5

Check name	Status	Explanation
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title clearly and concisely describes the main changes: refining mention badge layout and adding a fallback for missing avatars.
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.

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.}