[CSM][Web] Fix case detail page overflowing off-screen on wide comment content - #1424
Merged
rksk merged 3 commits intoAug 11, 2026
Conversation
A comment body carrying an explicit pixel width -- what a Word/Excel paste through the editor's HTML source mode produces, e.g. <div style="width:2400px"> -- inflated the intrinsic min-content width of the rich-text host, which propagated up bubble -> feed -> tab -> page root -> AppShell.Main and dragged the whole case-detail page wider than the viewport. The header actions, the Overview grid's last column, and the activity-timeline toolbar all got cut off past the right edge. The per-tag rules here (& table, & pre, & img) can't cover this: the width can sit on any element. `contain: inline-size` fixes it generically by making the host's own width independent of its contents, and overflowX keeps the wide content reachable by scrolling inside the comment instead of clipping it. Note `min-width: 0` / `overflow` alone do NOT solve this -- they zero a flex item's automatic minimum size, not the min-content contribution travelling up through block ancestors. Verified against this exact layout chain: with overflow set but no containment the page still blew out to 3120px; with containment it stays at the correct 930px. Also adds the missing max-width to `& pre`, which otherwise just *is* its explicit width, leaving its own overflow-x nothing to scroll.
…back The read-only Description card (shown when comments/search fails, so the description never reaches the activity feed) renders backend HTML through its own host, so it can be pushed off-screen by an explicit pixel width exactly like a comment could. Same guard, same reasoning as the comment bubble.
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughThe change constrains backend-rendered content in case comments and fallback descriptions. Comment containers and preformatted blocks now support horizontal scrolling without expanding the page layout. ChangesCase content overflow handling
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@apps/csm-portal/webapp/src/features/csm-cases/components/CsmCaseCommentBubble.tsx`:
- Around line 335-356: Update the isSystem rendering branch in
CsmCaseCommentBubble so its HTML content also applies maxWidth, contain:
"inline-size", and overflowX: "auto", matching the regular comment branch.
Ensure system comments with wide backend HTML remain contained and horizontally
scrollable without changing other rendering behavior.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 85b032bf-4b2e-494c-a2ac-b5c26584fe6c
📒 Files selected for processing (2)
apps/csm-portal/webapp/src/features/csm-cases/components/CsmCaseCommentBubble.tsxapps/csm-portal/webapp/src/features/csm-cases/pages/CsmCaseDetailPage.tsx
CsmCaseCommentBubble returns early for authorRole === "system", down a separate branch that renders backend HTML through its own host. That one still had only flex:1/min-width:0, so a system entry carrying an explicit pixel width could push the page off-screen exactly like a regular comment could -- the original fix only covered the main rich-text host. Confirmed against the same layout chain, with the system row's own flex-row shape: 3130px blowout before, correct 936px after.
rksk
approved these changes
Aug 11, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Purpose
A case comment whose body carries an explicit pixel width — what a Word/Excel paste through the comment editor's HTML source mode produces (e.g.
<div style="width:2400px">) — pushed the entire case-detail page wider than the viewport. The header actions (Assign to me / Acknowledge / More), the last column of the Overview section, and the activity-timeline toolbar (Filter / Newest first) all got cut off past the right edge, on any case type.Goals
Approach
src/features/csm-cases/components/CsmCaseCommentBubble.tsx— addedcontain: inline-size(plusmax-width: 100%/overflow-x: auto) to the rich-text host.The existing per-tag rules (
& table,& pre,& img) can't cover this, because the width can sit on any element.contain: inline-sizemakes the host's own width independent of its contents, so an over-wide child can no longer inflate the intrinsic min-content width that propagates upbubble → feed → tab → page root → AppShell.Main.Worth recording, since it's the non-obvious part:
min-width: 0/overflowalone do not fix this. They zero a flex item's automatic minimum size, not the min-content contribution travelling up through block ancestors. Measured against this exact layout chain — withoverflowset but no containment the page still blew out to 3120px; with containment it sits at the correct 930px.Same host also gained the missing
max-widthon& pre, which otherwise simply is its explicit width, leaving its ownoverflow-xnothing to scroll.src/features/csm-cases/pages/CsmCaseDetailPage.tsx— same guard on the read-only Description fallback card (rendered whencomments/searchfails, so the description never reaches the activity feed). It renders backend HTML through its own host and was exposed to the identical problem.User stories
As a CS engineer viewing a case, I can read a comment containing a wide pasted table without the page's header actions, Overview column, and timeline toolbar being pushed off-screen.
Release note
Fixed case detail page content overflowing off-screen when a comment contains wide HTML content such as a pasted table.
Documentation
N/A — internal CSM portal UI, no external doc surface affected.
Automation tests
Unit tests:
csm-casessuite passing (282 passed). Two failures inLinkCaseDialog/CaseActionBarare pre-existing onmainand unrelated — confirmed by re-running them on a clean checkout.Verified with the real
CaseActivitiesFeed/CsmCaseCommentBubblecomponents mounted in the actual shell layout shape, with a control run to prove the check detects the bug:(930px = 1000px viewport − 64px sidebar − borders, i.e. correct layout rather than a collapse.)
Security checks
Test environment
pnpm run lint(no new findings),pnpm run test,tsc -ball passing locally.Summary by CodeRabbit