fix(reports): wire up the CTA slide's scan-line/badge animation - #5822
Open
rafavalls wants to merge 1 commit into
Open
fix(reports): wire up the CTA slide's scan-line/badge animation#5822rafavalls wants to merge 1 commit into
rafavalls wants to merge 1 commit into
Conversation
…tion The scan-line/badge CSS was ported from decocms-tanstack's HeroDiagnostic but the JSX to render and gate it was never added, so it was dead code. Wires it onto the report card, keeping badges fully inside the card's own box (no negative offsets, no bottom-anchor) so they survive clipping on both narrow and short/wide viewports. Also drops a stray bottom padding that left a background gap below the card instead of it bleeding flush to the slide's edge. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
rafavalls
enabled auto-merge (squash)
August 7, 2026 18:41
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What is this contribution about?
The closing report slide's "diagnostic scan" animation (a lime scan-line sweep + three finding badges over the report card) never showed up — its CSS was ported from decocms-tanstack's
HeroDiagnosticbut the JSX that renders and gates it (data-play) was never added, so it sat dead inreports.css. This wires it onto the report card, positions the badges fully inside the card's own box (no negative offsets, no bottom-anchor) so they don't get clipped by the slide'soverflow-hiddenon narrow or short/wide viewports, and removes a straysm:pb-2that left a visible background gap below the card instead of it bleeding flush to the slide edge.How did you verify your code works?
bun run fmtandbun run --cwd=apps/web check(tsc) both pass. Verified manually with a throwaway Vite entry mountingCtaTemplatedirectly (not committed), screenshotted via Playwright at desktop (1400×900), mobile (375×812), and a short/wide (1600×700) viewport to confirm the scan-line and all three badges render without clipping, and that the card now sits flush to the bottom with no gap.Screenshots/Demonstration
Before: badges never appeared (dead CSS) and a gap showed below the report card. After: scan-line sweeps top-to-bottom, LCP/CLS/"No OG image" badges pop in and float, card is flush to the bottom across viewport sizes.
How to Test
Migration Notes
None.
Review Checklist
Summary by cubic
Wired up the CTA slide’s diagnostic scan animation so the lime scan-line and three finding badges appear on the report card. Also fixed layout to keep badges inside the card and removed a stray bottom gap.
data-playso the animation runs only when this slide is active.sm:pb-2to eliminate the gap below the card.enandpt-br.Written for commit 9fa20fc. Summary will update on new commits.