Skip to content

fix(reports): wire up the CTA slide's scan-line/badge animation - #5822

Open
rafavalls wants to merge 1 commit into
mainfrom
rafavalls/fix-final-slide-cta-animation
Open

fix(reports): wire up the CTA slide's scan-line/badge animation#5822
rafavalls wants to merge 1 commit into
mainfrom
rafavalls/fix-final-slide-cta-animation

Conversation

@rafavalls

@rafavalls rafavalls commented Aug 6, 2026

Copy link
Copy Markdown
Collaborator

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 HeroDiagnostic but the JSX that renders and gates it (data-play) was never added, so it sat dead in reports.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's overflow-hidden on narrow or short/wide viewports, and removes a stray sm:pb-2 that 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 fmt and bun run --cwd=apps/web check (tsc) both pass. Verified manually with a throwaway Vite entry mounting CtaTemplate directly (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

  1. Open a report and navigate to the last (CTA) slide, "Get the full analysis and run your site on autopilot."
  2. Watch the report card in the center: a lime line should sweep down it, and three small finding badges should pop in and float around it.
  3. Resize the window narrow (~375px) and short/wide (~1600×700) — badges and the card's bottom edge should stay clipped cleanly, with no stray gap of background below the card.

Migration Notes

None.

Review Checklist

  • PR title is clear and descriptive
  • Changes are tested and working
  • Documentation is updated (if needed)
  • No breaking changes

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.

  • Bug Fixes
    • Render scan-line and badges and gate them with data-play so the animation runs only when this slide is active.
    • Wrap the card with overflow hidden and position badges within the card to avoid clipping on narrow or short/wide viewports.
    • Remove sm:pb-2 to eliminate the gap below the card.
    • Add i18n strings for LCP/CLS/OG image findings in en and pt-br.

Written for commit 9fa20fc. Summary will update on new commits.

Review in cubic

…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
rafavalls enabled auto-merge (squash) August 7, 2026 18:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant