Truncate notebook Feed Tile Summary on /news/ cards with CSS

[aseckin]

A custom feed_tile_summary was rendered verbatim and overflowed the fixed-height (48px) summary slot of the news card. The rendered content is now clamped to the slot with line-clamp-2 (ellipsis) plus overflow-hidden on the slot, instead of pre-truncating the markdown text. getMarkdownSummary remains only as the fallback for notebooks without a custom summary.

Closes #5189

Generated with Claude Code

[coderabbitai]

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

• Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

---

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

[github-actions]

🚀 Preview Environment

Your preview environment is ready!

Resource	Details
🌐 Preview URL	https://metaculus-pr-5190-issue-5189-20260918-1553-preview.mtcl.cc
📦 Docker Image	ghcr.io/metaculus/metaculus:issue-5189-20260918-1553-e3e15bf
🗄️ PostgreSQL	NeonDB branch preview/pr-5190-issue-5189-20260918-1553
⚡ Redis	Fly Redis mtc-redis-pr-5190-issue-5189-20260918-1553

Details

• Commit: e3e15bf4d43e9ee0913faca8f321949277a3bc90
• Branch: claude/issue-5189-20260918-1553
• Fly App: metaculus-pr-5190-issue-5189-20260918-1553

---

ℹ️ 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

[aseckin]

@claude increase to line-clamp-3

[aseckin]

@claude just for tablet and desktop screens, keep 2 for mobile

[claude]

Claude finished @aseckin's task in 1m 3s —— View job

---

Increased summary clamp to 3 lines

• Gather context (read news_card.tsx)
• Understand request: change line-clamp-2 → line-clamp-3
• Update clamp and grow the fixed-height slot so the third line is visible
• Commit to PR branch

Pushed 257062d to this branch. Changes in front_end/src/components/news_card.tsx:

• line-clamp-2 → line-clamp-3 on the rendered summary.
• Slot height h-12 (48px) → h-[72px] so the third line actually shows instead of being clipped by overflow-hidden. Tailwind v3 has no h-18, hence the arbitrary value.
• Fallback getMarkdownSummary height 48 → 72, so notebooks without a custom summary also get 3 lines of text.
• Updated the explanatory comment to match.

The card's sm:h-64 (256px) fixed height still fits the extra 24px: category + 2-line title + 3-line summary + footer + padding comes to roughly 250px.

I did not run lint or type checks (no Bash allowed), but the change is purely to class strings and a numeric literal.
· Branch

[claude]

Claude finished @aseckin's task in 52s —— View job

---

Summary clamp is now responsive

• Gather context (read news_card.tsx, PR diff)
• Use line-clamp-2 / 48px slot on mobile, line-clamp-3 / 72px slot from sm: up
• Commit and push to the PR branch

Pushed in e3e15bf. Changes in front_end/src/components/news_card.tsx:

• Summary slot: h-12 overflow-hidden sm:h-[72px] (2 lines on mobile, 3 lines on tablet/desktop).
• Rendered content: line-clamp-2 ... sm:line-clamp-3.
• Breakpoint matches the card's existing layout switch (sm:flex-row-reverse / sm:h-64).
• The getMarkdownSummary fallback still generates text for the larger 3-line slot; on mobile the CSS clamp trims it to 2 lines with an ellipsis. Kept it that way rather than computing a viewport-dependent height in JS.

Not verified: I couldn't run prettier/eslint on the file (Bash with shell operators is blocked in this run), so please rely on CI for lint.
· Branch