[CSM Portal Microapp] Fit inline comment images to the screen width

[Hesara2003]

Purpose

Images embedded in a case's comment history (Activities feed) overflow the microapp's narrow viewport instead of fitting within its margins.

Goals

Constrain inline comment images to the screen width, same as any other responsive image.

Approach

CommentBody.tsx sanitizes and renders comment HTML via dangerouslySetInnerHTML, styled through HTML_CONTENT_SX (paragraph spacing, link color, list indent). That style object had no rule for <img>, so an embedded image rendered at its original (often desktop-sized) dimensions. Added & img: { maxWidth: "100%", height: "auto", display: "block" } so images scale down to fit their container.

Checked CaseActivityFeed.tsx to confirm CommentBody is the only place in the Activities feed that renders HTML/images — attachment entries only show a filename/icon with no thumbnail, so there's no other overflow path in that feed.

User stories

As a user viewing a case's activity history in the CSM microapp, an image embedded in a comment fits within the screen instead of overflowing the page horizontally.

Release note

Images embedded in case comments now fit the screen width in the CSM microapp's Activities feed.

Documentation

N/A — in-app UI fix only, no documentation impact.

Automation tests

• Unit tests

  No new test added; this is a scoped CSS fix to an existing sanitize/render path already covered by manual verification.

• Integration tests

  Manually verified in the local dev server.

Security checks

• Followed secure coding standards in http://wso2.com/technical-reports/wso2-secure-engineering-guidelines? yes
• Ran FindSecurityBugs plugin and verified report? N/A (TypeScript/React frontend change, no Java code)
• Confirmed that this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets? yes

Test environment

Local Vite dev server, Chrome.

Summary by CodeRabbit

• Bug Fixes
  • Improved comment display by ensuring embedded images fit within the available viewport.
  • Prevented image overflow and layout issues while preserving image proportions.

[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: ff1dac1c-fe43-4d8c-98a1-9971cbb8d81a

📥 Commits

Reviewing files that changed from the base of the PR and between 9fde1ca and d27fdb5.

📒 Files selected for processing (1)

• apps/csm-portal/microapp/src/components/case-detail/CommentBody.tsx

---

📝 Walkthrough

Walkthrough

Updated sanitized comment HTML styling so embedded images fit the microapp viewport, preserve their aspect ratio, and render consistently as block elements.

Changes

Comment image layout

Layer / File(s)	Summary
Responsive comment image styling apps/csm-portal/microapp/src/components/case-detail/CommentBody.tsx	The HTML_CONTENT_SX styles constrain embedded images to 100% width, set automatic height, and display them as blocks.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Possibly related PRs

• wso2-open-operations/cs-tools#1073: Resolves inline comment image URLs while this change controls the layout of those rendered images.

Suggested labels: Type/Bug, Area/Frontend

Suggested reviewers: rashmika998

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main change: constraining inline comment images to the microapp width.
Description check	✅ Passed	The description covers purpose, goals, approach, testing, security, release note, and environment, with only optional sections omitted.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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