fix: Allow scroll passthrough on tweet embeds

[SylvainChevalier]

Removes overscroll-behavior: contain from tweet embed scroll containers so that when a tweet is scrolled to its boundary, the scroll propagates to the page. This improves scrolling UX especially on mobile.

Closes #4455

Generated with Claude Code

Summary by CodeRabbit

• Style
  • Adjusted scroll behavior in the markdown editor component to improve scrolling interactions.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: d7845d39-3cb5-460a-8d1d-dd8e9594a941

📥 Commits

Reviewing files that changed from the base of the PR and between 750eb48 and 89b9e47.

📒 Files selected for processing (1)

• front_end/src/components/markdown_editor/editor.css

💤 Files with no reviewable changes (1)

• front_end/src/components/markdown_editor/editor.css

---

📝 Walkthrough

Walkthrough

This PR fixes mobile scrolling behavior by removing the overscroll-behavior: contain; CSS property from tweet embedded scrolls. The property was preventing page scrolling when users reached the bottom of an embedded tweet, creating friction in mobile browsing. With this removal, users can now scroll the page naturally after scrolling through a tweet.

Changes

Tweet scroll behavior

Layer / File(s)	Summary
Remove overscroll containment from tweet embed front_end/src/components/markdown_editor/editor.css	Deletes overscroll-behavior: contain; from the .tweets-wrapper > p .tweet-embed-scroll CSS rule while preserving the max-height and overflow-y: auto properties that define the scroll container.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

🐰 A scroll through tweets was stuck, oh no!
The page refused to budge and flow,
But one property removed with care,
Now scrolls cascade through mobile air! 🍃

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: removing the scroll containment property to allow scroll passthrough on tweet embeds, which directly matches the single CSS modification.
Linked Issues check	✅ Passed	The change directly addresses issue #4455 by removing overscroll-behavior: contain to allow scroll propagation from tweet embeds to the page, matching the stated requirement to enable scrolling beyond embed boundaries.
Out of Scope Changes check	✅ Passed	The change is narrowly scoped to the specific CSS property causing the scrolling issue; no unrelated modifications are present in the pull request.

_{✏️ 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 claude/issue-4455-tweet-embeds-make-scrolling-difficult

---

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-4503-claude-issue-4455-tweet-embeds-preview.mtcl.cc
📦 Docker Image	ghcr.io/metaculus/metaculus:claude-issue-4455-tweet-embeds-make-scrolling-difficult-37962c9
🗄️ PostgreSQL	NeonDB branch preview/pr-4503-claude-issue-4455-tweet-embeds
⚡ Redis	Fly Redis mtc-redis-pr-4503-claude-issue-4455-tweet-embeds

Details

• Commit: f5d0e8c70f771da0af5a12c06396ab2898b167a4
• Branch: claude/issue-4455-tweet-embeds-make-scrolling-difficult
• Fly App: metaculus-pr-4503-claude-issue-4455-tweet-embeds

---

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

[SylvainChevalier]

@claude the Preview Environment seems to be erroring out.

[claude]

Claude finished @SylvainChevalier's task in 1m 7s —— View job

---

Investigating Preview Environment Issue

• Gather context on the PR and preview environment
• Check CI/deployment status and logs
• Investigate the error and report findings

Findings

All CI jobs passed (unit tests, integration tests, preview deployment), but the deploy logs reveal the root cause. During the Fly.io deployment, this warning was emitted:

WARNING The app is not listening on the expected address and will not be reachable by fly-proxy.
You can fix this by configuring your app to listen on the following addresses:
  - 0.0.0.0:8080
Found these processes inside the machine with open listening sockets:
  PROCESS        | ADDRESSES                              
-----------------*----------------------------------------
  /.fly/hallpass | [fdaa:3e:ce03:a7b:60d:7a39:688c:2]:22  

This means the Fly machine was created and started, but the application process is not binding to port 8080 as expected by Fly's proxy. Only the SSH hallpass process is listening — the actual web server never started or crashed on startup.

This is not related to the PR's code change (which only removes one CSS line). It's an infrastructure/preview environment issue — likely the app is failing during startup inside the container. Unfortunately, I don't have access to the Fly.io runtime logs (flyctl logs) from this environment to see the exact startup error.

Suggestions

1. Check Fly runtime logs — someone with Fly access can run:

   flyctl logs -a metaculus-pr-4503-claude-issue-4455-tweet-embeds
   

   to see why the app process isn't starting.

2. Try redeploying — push an empty commit or re-run the preview workflow to see if it's a transient issue.

3. Check if other PR previews work — if they're also broken, it could be a broader infrastructure issue.

---

| Branch

[SylvainChevalier]

@cemreinanc help please?

[cemreinanc]

@SylvainChevalier preview opens now and looks like it does what you meant. Looks good?

[SylvainChevalier]

lgtm! thanks @cemreinanc!