fix: remove hardcoded 700px width from question editing distribution chart

[aseckin]

Removes the hardcoded style={{ width: 700 }} from the distribution chart preview container in numeric_question_input.tsx. The chart now fills its parent container responsively, fixing the broken layout on narrow screens.

Closes #3655

Generated with Claude Code

Summary by CodeRabbit

• Style
  • Improved the example input chart layout flexibility by removing a fixed width constraint, allowing better responsiveness across different screen sizes.

[coderabbitai]

📝 Walkthrough

Walkthrough

Removed a fixed 700px width container wrapping the Example input chart in the numeric question input component. No behavioral or logic changes; rendering flow and conditions remain unchanged.

Changes

Cohort / File(s)	Summary
UI Layout Adjustment front_end/src/app/(main)/questions/components/numeric_question_input.tsx	Removed fixed 700px width container around the Example input chart to improve responsive behavior on narrow screens.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Suggested reviewers

• elisescu
• lsabor
• hlbmtc

Poem

🐰 A rigid constraint fell away,
Like carrots on a narrow tray,
The width that bound now set it free,
On small screens, responsive glee!

🚥 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 accurately and specifically describes the main change: removing a hardcoded 700px width from the distribution chart in question editing.
Linked Issues check	✅ Passed	The PR directly addresses the primary objective from issue #3655 by removing the hardcoded 700px width from the numeric question input chart, fixing the broken UI on narrow screens.
Out of Scope Changes check	✅ Passed	The change is narrowly scoped to removing the fixed width constraint from the distribution chart in numeric_question_input.tsx, with no unrelated modifications present.

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

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch claude/issue-3655-fix-question-editing-ui-for

---

No actionable comments were generated in the recent review. 🎉

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

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-4335-claude-issue-3655-fix-question-preview.mtcl.cc
📦 Docker Image	ghcr.io/metaculus/metaculus:claude-issue-3655-fix-question-editing-ui-for-bf539e7
🗄️ PostgreSQL	NeonDB branch preview/pr-4335-claude-issue-3655-fix-question
⚡ Redis	Fly Redis mtc-redis-pr-4335-claude-issue-3655-fix-question

Details

• Commit: 108a18ec702fdf5906b5e37a4150c5873993cde6
• Branch: claude/issue-3655-fix-question-editing-ui-for
• Fly App: metaculus-pr-4335-claude-issue-3655-fix-question

---

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

this is super straightforward but tagged you anyway @elisescu