fix: full width image will move together when scrolling [SPMVP-5751]

[arielllin]

Jira

https://storipress-media.atlassian.net/browse/SPMVP-5751

Root cause

圖片滿版時的寬度設定為 100vw 導致捲軸出現

Purpose

修正文章圖片滿版時會超出右邊且可以捲動的問題

For who

• reader-facing?
• publisher-facing?
• developer-facing?

How did you fix it?

取得 body width 並設為圖片滿版時的寬度

Production deployment notes

🎩 Tophat

Do a thorough 🎩. What is tophatting?

Consider testing:

• Existing functionality which could break due to your changes (e.g. global changes)
• New functionality being introduced. Ensure it meets intended behavior
• All different permutations (flows, states, conditions, etc) that are possible
• If you are modifying something which is used in multiple places, 🎩 all affected areas not just what you intend to change

🎩 Instructions

test in local

1. Update kanbon in local (run yarn postinstall)
2. cd package/playground and run yarn dev
3. Go to the article page with full width image (test in http://localhost:3000/posts/599)
4. No horizontal scrolling ⭕

Related PRs

Checklist before requesting review

• I have done a self-review of my own code (comment on code is not required but recommended)
• I did the Tophat steps and confirm the issue fixed
• I have confirmed there is no issue reported by Static Analyzer (Please double check for custom class. For other issues, if you think it's ignorable, please add // eslint-ignore-next-line <rule name> on it)
• I have confirmed there is no deepsource issue (if you think it's ignorable, please explain why and add a skipcq comment)
• I confirmed that the unit test is passed (if you break it, please fix it in this PR)
• I confirmed that I didn't break E2E test (if you break it, please fix it or create a new Jira)

Emoji Guide

For reviewers: Emojis can be added to comments to call out blocking versus non-blocking feedback.

E.g: Praise, minor suggestions, or clarifying questions that don’t block merging the PR.

🟢 Nice refactor!

🟡 Why was the default value removed?

E.g: Blocking feedback must be addressed before merging.

🔴 This change will break something important

Blocking	🔴 ❌ 🚨	RED
Non-blocking	🟡 💡 🤔 💭	Yellow, thinking, etc
Praise	🟢 💚 😍 👍 🙌	Green, hearts, positive emojis, etc

Gif (optional)