Chart value box fix

[ncarazon]

This PR fixes the problem with alignment in chart value box.

Before:

After:

Summary by CodeRabbit

• Bug Fixes
  • Corrected positioning of chart value boxes when displayed on the left side of charts.

[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: db633e2e-d71d-4c00-8b33-ed858aef001b

📥 Commits

Reviewing files that changed from the base of the PR and between f3e4d51 and 8269d6f.

📒 Files selected for processing (1)

• front_end/src/components/charts/primitives/chart_value_box.tsx

---

📝 Walkthrough

Walkthrough

A fix to the getRectX function in the chart value box component corrects the x-coordinate calculation for left-aligned placements by changing the textWidth operation from addition to subtraction, refining the rectangle positioning logic.

Changes

Cohort / File(s)	Summary
Chart Position Calculation front_end/src/components/charts/primitives/chart_value_box.tsx	Modified arithmetic in getRectX function for placement: "left" to subtract textWidth instead of adding it when computing rectangle x-coordinate.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Suggested reviewers

• elisescu
• lsabor
• hlbmtc
• cemreinanc

Poem

🐰 A tiny hop through coordinate space,
Where left-side boxes find their place,
Minus where plus once stood so tall,
Precise positioning fixes all! ✨

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title refers to a real aspect of the changeset—fixing a chart value box issue—which aligns with the code change and PR objectives, though it is somewhat generic.

_{✏️ 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/chart-value-box

📝 Coding Plan

• Generate coding plan for human review comments

---

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

Tip

You can customize the tone of the review comments and chat replies.

Configure the tone_instructions setting to customize the tone of the review comments and chat replies. For example, you can set the tone to Act like a strict teacher, Act like a pirate and more.

[github-actions]

🚀 Preview Environment

Your preview environment is ready!

Resource	Details
🌐 Preview URL	https://metaculus-pr-4516-fix-chart-value-box-preview.mtcl.cc
📦 Docker Image	ghcr.io/metaculus/metaculus:fix-chart-value-box-8269d6f
🗄️ PostgreSQL	NeonDB branch preview/pr-4516-fix-chart-value-box
⚡ Redis	Fly Redis mtc-redis-pr-4516-fix-chart-value-box

Details

• Commit: 8269d6f4aefd00c2ba3026ad0f15c67371ecd4b2
• Branch: fix/chart-value-box
• Fly App: metaculus-pr-4516-fix-chart-value-box

---

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