claude-universal-frontend-feedback-gnnzua — visual evidence¶

Generated by the visual-evidence autogen for claude/universal-frontend-feedback-gnnzua (rendered from 901d8a5), in the same jammy Playwright image the snapshot gate uses.

Pixel baselines: the 9-skin homepage verify pass passed (9/9) this run, so there is no baseline diff to bless and the snapshot verdict is not-applicable. The images below are before/after evidence for the PR's UI change, not the output of a failed snapshot gate.

01-before-after-home.png (viewed) — the homepage / from the base branch (BEFORE — origin/main) beside this PR (AFTER — #472 @ 6bdf6d9), at 390px and 1280px, same widths and browser. The hero heading and copy, the three primary buttons (Get Started / Features / GitHub), the navbar, and the footer bar (GitHub / RubyGems / Docker Hub / Fork Project with the "A modern website theme that just works…" strap) all match between BEFORE and AFTER. The one deliberate UI difference I could see is the feedback FAB in the lower-left corner: in BEFORE it renders as a small blue square button; in AFTER it is a circular blue megaphone button. That is consistent with the PR's stated conversion of the FAB from a JavaScript-only <button> into an anchor upgraded in place. Reported page overflow is 0px in both BEFORE and AFTER at both widths.

I also observed that the hero preview illustration is not pixel-identical between the BEFORE and AFTER crops. That region is produced by the preview-image generator, which none of this PR's changed files touch, and the 9-skin homepage baselines passed 9/9 — so it reads as render-timing variance between two live captures rather than a change introduced here. I am flagging it for a human under concerns rather than treating it as settled.

02-viewport-matrix-home.png (viewed) — the header band of / (AFTER) swept across 320 → 1440px. The navbar collapses to brand + search + overflow menu at narrow widths and expands to the full Quick Start / News / Notes / Notebooks / Recipes / Docs / About row at wide widths, labelled overflow 0px at every width; I saw no clipping, wrapping, or off-viewport content.

metrics.json (read) — a six-width sweep of / (320 → 1440px). Every width returns HTTP 200 on both BEFORE and AFTER with beforeOverflowPx and afterOverflowPx both 0 and no overflowing element recorded. No metric regressed.

Files¶

01-before-after-home.png
02-viewport-matrix-home.png
CHANGELOG-snippet.txt
metrics.json

Regenerate¶

docker compose up -d                              # serves :4000
python3 scripts/ci/visual_evidence_autogen.py all --base origin/main

Root cause of the FAB difference (verified after the autogen run)¶

The autogen narrative above reports the FAB changing from a blue square to a blue circle and reads it as a consequence of the button becoming an anchor. That is the right observation; the cause is worth recording, because the AFTER render is not a new design — it is the design this component always specified, finally applied.

origin/main and this branch were built side by side and #pageFeedbackFab measured in Chromium at 1280px:

	element	`border-radius`	`display`	box
BEFORE (`origin/main`)	`<button>`	4px	block	56×56
AFTER (this PR)	`<a>`	50%	flex	56×56

_sass/components/_page-feedback.scss asks for border-radius: 50% and display: inline-flex, and that rule compiles into main.css on both branches. On main it was losing the cascade to _sass/core/code-copy.scss:

.button,
button:not(.copy) { display: inline-block; padding: 0 20px; border-radius: 4px; border: 1px solid #bbb; font-size: 11px; cursor: pointer; }

button:not(.copy) is specificity (0,1,1) against .pf-fab's (0,1,0), so it won outright and the component's own stylesheet never reached its own FAB. The feedback FAB has been rendering as a 4px-radius rectangle with 20px of horizontal padding since it shipped. Making it an anchor sidesteps the selector.

Not fixed here, deliberately: a stylesheet named for code-copy buttons restyling every <button> on the site that is not .copy is a site-wide defect that needs its own before/after pass over the other button FABs (#sidebarFab, #obsidianLocalGraphFab) and every plain button on a page. Putting a site-wide restyle inside a feedback-widget PR would hide it under a title nobody would look beneath.

On the hero-image concern the narrative flagged for a human: not this PR. Nothing in the diff touches the preview-image generator, the 9-skin pixel baselines passed 9/9, and overflow is 0px at every width on both sides — it reads as render-timing variance between the two captures.