fix image text & redesign event card

[flvvius]

Summary by CodeRabbit

• UI Improvements
  • Event cards redesigned with improved topic display positioning and enhanced spacing throughout.
  • Event detail pages improved with better responsive design, reorganized headers, and updated layout structure.
  • Share preview images now optimized using JPEG format.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
news-web	Ready	Preview, Comment	Apr 27, 2026 5:28pm

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

Walkthrough

The PR refactors the event card and detail page UI to reposition topic overlays and update responsive spacing, while simultaneously modifying the backend image generation pipeline to produce JPEG images instead of PNGs using the sharp library for conversion with quality-based size optimization.

Changes

Cohort / File(s)	Summary
Event Card UI apps/web/src/components/feed/event-card.tsx, apps/web/src/routes/event.$slug.tsx	Refactored card and hero layouts with repositioned topic overlays, restructured header area moving "Updated" label alongside controls, adjusted responsive spacing/sizing, and updated hero image aspect ratio and border radius behavior.
Share Asset Version packages/backend/convex/shareAssets.ts	Updated SHARE_RENDER_VERSION constant from v7 to v8 to reflect new JPEG output encoding, affecting render signature cache keys.
Share Asset Generation packages/backend/convex/shareAssetsNode.ts	Modified image generation to produce JPEG instead of PNG, implementing Resvg-to-PNG rendering followed by sharp-based JPEG conversion with quality targeting to achieve ≤280KB file size limit.
Backend Dependencies packages/backend/convex.json, packages/backend/package.json	Added sharp to both node.externalPackages configuration and dependencies list to support JPEG conversion in asset generation pipeline.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Feat/sharable card event #14: Both PRs modify event-card.tsx and backend share-asset generation; this PR updates rendering from resvg-wasm/PNG to Resvg+sharp/JPEG conversion.
• feat: add bookmarks to events and bookmark page #5: Both PRs reorganize and relocate share/bookmark controls in the event card and detail page headers.
• add event date and search for events #13: Both PRs modify timestamp display and header layout reorganization in event-card and event.$slug components.

Suggested labels

v0

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The title mentions 'fix image text' and 'redesign event card', but the changeset includes significant backend modifications (JPEG output, sharp library integration, render signature versioning) that constitute more than just event card redesign.	Consider a more comprehensive title that reflects all major changes, such as 'Redesign event card and switch share asset generation to JPEG' or split into separate focused PRs.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/custom-image-no-text

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}