fix: Sanremo promo background image cover crop broken on export

[Copilot]

html-to-image neither honours object-fit: cover on <img> elements nor reliably inlines external CSS background-image URLs (silent CORS failure → blank background). Both previous approaches failed at export time.

Fix

Pre-render the background onto an off-screen canvas at the exact template dimensions (1080 × 1350) with cover-crop math in a useEffect, store the result as an inline data URL, and use that as <img src>. html-to-image inlines data: URLs as-is — no fetch, no CORS, no object-fit interpretation.

// cover crop: max-scale + center-horizontal + anchor-top
const scale = Math.max(TOTAL_WIDTH / img.naturalWidth, TOTAL_HEIGHT / img.naturalHeight);
const dx = (TOTAL_WIDTH - img.naturalWidth * scale) / 2;
ctx.drawImage(img, dx, 0, img.naturalWidth * scale, img.naturalHeight * scale);
setBgDataUrl(canvas.toDataURL('image/jpeg', 0.92));

The raw URL remains as src fallback during the async load; object-fit: cover is kept for that transient browser state.

• app/templates/TemplateSanremoPromoPost.tsx — adds canvas pre-render effect; <img src> switches to bgDataUrl || backgroundImageUrl

Original prompt

Create a PR in gaulatti/stronzi to fix the Sanremo promo post image so it resizes to cover the background area instead of using its original size.

Context:

• User reports: in the post, the image does not resize to cover the background; it uses original size.
• Reference commit showing relevant change/context: 4d9a2f3#diff-0bdd8634fd53c9b6495846e8653b1c9982ff4cacdb85aa5aa913004331731116

Tasks:

1. Inspect the file in the diff referenced above and identify how the promo image is implemented:
   • If it is a CSS background image, ensure the container has background-size: cover, background-position: center, background-repeat: no-repeat, and appropriate height/aspect ratio behavior.
   • If it is an <img> used as a background/hero, ensure its container constrains it and apply width: 100%, height: 100%, object-fit: cover, and object-position: center.
2. Apply the minimal, targeted change so only the Sanremo promo (or the relevant promo template) is affected, avoiding regressions to other templates.
3. Add/update any relevant stylesheets/templates in a maintainable way (prefer existing style conventions).
4. If the project has tests or linting, ensure they pass; otherwise, do a basic manual verification note in PR description.
5. Provide a clear PR title and description summarizing the change and how to verify.

Acceptance criteria:

• The Sanremo promo image visually fills its intended background/hero area across common viewport sizes.
• No distortion (keep aspect ratio).
• No unexpected side effects on other posts/templates.

This pull request was created from Copilot chat.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.