feat(ngo-admin): preview the embed widget

[Favourof]

Description

close #236.

Previously, EmbedSnippet allowed NGOs to select widget dimensions and copy the embed code, but they could not preview how the widget rendered at that size without pasting it into an external page.

This PR adds a live preview iframe directly adjacent to the snippet so NGOs can see real-time sizing adjustments.

Changes

• Rendered an iframe preview alongside the embed snippet utilizing the active width and height.
• Added title="Donate widget preview" for accessibility.
• Styled preview container with responsive layout and border treatment consistent with the design system.
• Added comprehensive unit tests in src/components/ngoAdmin/EmbedSnippet.test.tsx verifying:
  • Initial rendering with default dimensions.
  • Sizing updates when changing preset dimensions (Wide, Compact).
  • Sizing updates when custom width and height inputs are modified.

How to Test

1. Run npx vitest run src/components/ngoAdmin/EmbedSnippet.test.tsx.
2. Navigate to /ngo-admin with a verified NGO and inspect the embed snippet preview card.

[vercel]

@Favourof is attempting to deploy a commit to the Ashborne team Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@Favourof Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits