Notebook feed tiles: full-background image

[leonardthethird]

Summary

Notebook feed tiles with a cover image now adopt the tournament-tile treatment (Ryan's suggestion, "Option E"): the image fills the card as a full-bleed background with a gradient scrim, and the title + preview text are overlaid in white. This gives the preview room to read instead of being crushed into a ~86px column next to a fixed 176px thumbnail.

Notebook tiles without an image are unchanged.

Context: #frontend Slack thread. Several mockups (A–E) were explored; E was the consensus pick (Leonard + Ryan).

Changes

• post_card/index.tsx — computes the notebook cover-image URL once and passes it to BasicPostCard (backgroundImageUrl) and NotebookTile (fullBackground).
• basic_post_card/index.tsx — when a background image is present, the card becomes a relative, min-height container with the image + dark bottom-weighted gradient scrim absolutely positioned behind white-text content (title, preview, footer).
• notebook_tile.tsx — new fullBackground mode renders preview text only (white, 3-line clamp, full width) and drops the separate thumbnail, since the image is now the background.
• post_controls.tsx — onImage flag makes the footer rail legible (white text) over the image; the vote/comment pills keep their light backgrounds.

Notes / follow-ups

• One open question from the thread: avoid a tournament tile and a notebook tile from the same project both surfacing at the top of the feed. Not addressed here (separate feed-logic change).
• Visual review best done on the PR preview deploy.

Test plan

• Preview deploy: notebook tile with image renders as full-background overlay; title + preview readable.
• Notebook tile without image renders unchanged (purple-bordered text tile).
• Light + dark mode legibility.
• Footer (votes, comment count) legible and clickable over the image.
• Tournament tiles still render correctly (no regression) and remain visually distinct.

🤖 Generated with Claude Code

Summary by CodeRabbit

Release Notes

• New Features

  • Post cards now support full-cover background imagery with overlay/gradient layers for a richer visual layout.
  • Notebook post tiles now include a “full background” mode that switches to a simplified single-column presentation when an eligible background image is available.

• Improvements

  • Post card styling and link/control positioning adapt automatically when a background image is present.
  • Post card controls/titles update their visual treatment based on image presence.
  • Vote score styling was refined for more consistent typography.

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

PostCard derives a notebookImageUrl from an HTTPS-only notebook image URL and passes it to BasicPostCard as backgroundImageUrl and to NotebookTile as fullBackground. BasicPostCard conditionally renders a next/image with overlay/gradient layers and adjusts styling; BasicPostControls gains an onImage flag and PostVoter vote-score className is refactored. NotebookTile adds a fullBackground early-return layout path.

Changes

Notebook Post Card Background Image

Layer / File(s)	Summary
PostCard orchestration and NotebookTile fullBackground layout front_end/src/components/post_card/index.tsx, front_end/src/components/post_card/notebook_tile.tsx	PostCard derives notebookImageUrl from an HTTPS notebook image URL, passes it to BasicPostCard as backgroundImageUrl, and passes fullBackground to NotebookTile. NotebookTile adds Props.fullBackground and an early-return branch rendering feed_tile_summary or a generated markdown summary at height 80 with alternate contentEditableClassName styling.
BasicPostCard background image rendering and controls styling front_end/src/components/post_card/basic_post_card/index.tsx, front_end/src/components/post_card/basic_post_card/post_controls.tsx, front_end/src/components/post_card/basic_post_card/post_voter.tsx	BasicPostCard adds a backgroundImageUrl prop, derives hasBackgroundImage, conditionally renders next/image with overlay/gradient layers, and branches link/title class names on hasBackgroundImage. BasicPostControls gains onImage?: boolean, switching its wrapper div to relative text-gray-0 via cn() when true. PostVoter vote-score className is refactored to split gray/font classes into separate cn() arguments.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• Metaculus/metaculus#4640: Overlaps with changes to BasicPostCard's vote score styling and typography in post_voter.tsx.

Suggested reviewers

• elisescu
• cemreinanc

Poem

🐇 Hop hop, a notebook glows,
With images behind the prose!
HTTPS only, safe and bright,
Gradients shimmer in the night.
Overlays stack, the title shines —
A rabbit painted between the lines! 🎨

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: implementing full-background image support for notebook feed tiles, which is the core feature across all modified components.
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.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch notebook-tile-full-background

---

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.}

[github-actions]

🚀 Preview Environment

Your preview environment is ready!

Resource	Details
🌐 Preview URL	https://metaculus-pr-4914-notebook-tile-full-background-preview.mtcl.cc
📦 Docker Image	ghcr.io/metaculus/metaculus:notebook-tile-full-background-7709f26
🗄️ PostgreSQL	NeonDB branch preview/pr-4914-notebook-tile-full-background
⚡ Redis	Fly Redis mtc-redis-pr-4914-notebook-tile-full-background

Details

• Commit: 9d2868b99aa38241f9c812cca257ea2644bdf6bf
• Branch: notebook-tile-full-background
• Fly App: metaculus-pr-4914-notebook-tile-full-background

---

ℹ️ Preview Environment Info

Isolation:

• PostgreSQL and Redis are fully isolated from production
• Each PR gets its own database branch and Redis instance
• Changes pushed to this PR will trigger a new deployment

Limitations:

• Background workers and cron jobs are not deployed in preview environments
• If you need to test background jobs, use Heroku staging environments

Cleanup:

• This preview will be automatically destroyed when the PR is closed