From 410eb6999842ce441b2355c3d68a45d9520be195 Mon Sep 17 00:00:00 2001 From: Hesara2003 Date: Tue, 11 Aug 2026 14:51:41 +0530 Subject: [PATCH 1/3] [CSM Portal] Stop a wide comment from pushing the case page off-screen A comment body carrying an explicit pixel width -- what a Word/Excel paste through the editor's HTML source mode produces, e.g.
-- 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. --- .../components/CsmCaseCommentBubble.tsx | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/apps/csm-portal/webapp/src/features/csm-cases/components/CsmCaseCommentBubble.tsx b/apps/csm-portal/webapp/src/features/csm-cases/components/CsmCaseCommentBubble.tsx index 5130ccd650..9932ce8cfa 100644 --- a/apps/csm-portal/webapp/src/features/csm-cases/components/CsmCaseCommentBubble.tsx +++ b/apps/csm-portal/webapp/src/features/csm-cases/components/CsmCaseCommentBubble.tsx @@ -332,6 +332,28 @@ export default function CsmCaseCommentBubble({ `, and a + // `
`/`
` can carry one just as easily — so the per-tag rules
+            // below can never cover every case.
+            //
+            // `contain: inline-size` is what actually stops it: it makes this
+            // box's own width independent of its contents, so an over-wide child
+            // can no longer inflate the *intrinsic* min-content width that
+            // otherwise propagates up the whole chain (bubble → feed → tab →
+            // page root → AppShell.Main) and drags the page off-screen, cutting
+            // off the header actions, the Overview grid's last column, and the
+            // timeline toolbar. `min-width: 0` / `overflow` alone do NOT do this:
+            // they zero a *flex item's* automatic minimum size, not the
+            // min-content contribution travelling up through block ancestors —
+            // verified empirically against this exact layout chain, where the
+            // page still blew out to 3080px with overflow set but no containment.
+            //
+            // `overflowX` then makes that over-wide content reachable by
+            // scrolling inside the comment, rather than being clipped away.
+            contain: "inline-size",
+            overflowX: "auto",
             overflowWrap: "anywhere",
             wordBreak: "break-word",
             "& p": { m: 0 },
@@ -345,11 +367,15 @@ export default function CsmCaseCommentBubble({
               fontSize: "0.85em",
               overflowWrap: "anywhere",
             },
+            // `maxWidth` matters as much as `overflowX` here: a `
` carrying
+            // an explicit `width` would otherwise just *be* that wide, and
+            // `overflow-x` would have nothing to scroll.
             "& pre": {
               bgcolor: "background.default",
               p: 1,
               borderRadius: 1,
               overflowX: "auto",
+              maxWidth: "100%",
               fontFamily: "monospace",
               fontSize: "0.85em",
             },

From 9dc353e0f408e7bc56b90802e43c81bf5785b44a Mon Sep 17 00:00:00 2001
From: Hesara2003 
Date: Tue, 11 Aug 2026 14:51:47 +0530
Subject: [PATCH 2/3] [CSM Portal] Apply the same width containment to the
 description fallback

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.
---
 .../src/features/csm-cases/pages/CsmCaseDetailPage.tsx    | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/apps/csm-portal/webapp/src/features/csm-cases/pages/CsmCaseDetailPage.tsx b/apps/csm-portal/webapp/src/features/csm-cases/pages/CsmCaseDetailPage.tsx
index 8e0579f348..bbc02826e2 100644
--- a/apps/csm-portal/webapp/src/features/csm-cases/pages/CsmCaseDetailPage.tsx
+++ b/apps/csm-portal/webapp/src/features/csm-cases/pages/CsmCaseDetailPage.tsx
@@ -2153,6 +2153,14 @@ export default function CsmCaseDetailPage(): JSX.Element {
                 sx={{
                   typography: "body2",
                   color: "text.primary",
+                  // Same containment the comment bubble needs — see the long
+                  // note in `CsmCaseCommentBubble`. This description is backend
+                  // HTML too, so it can carry an explicit pixel width that would
+                  // otherwise drag the whole page off-screen.
+                  minWidth: 0,
+                  maxWidth: "100%",
+                  contain: "inline-size",
+                  overflowX: "auto",
                   "& p": { mb: 0.5 },
                   "& p:last-child": { mb: 0 },
                 }}

From 2608ca20e6455d71f4fd669fe462e79b04bd89cf Mon Sep 17 00:00:00 2001
From: Hesara2003 
Date: Tue, 11 Aug 2026 16:04:57 +0530
Subject: [PATCH 3/3] [CSM Portal] address CR: contain the system-comment
 branch too

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.
---
 .../features/csm-cases/components/CsmCaseCommentBubble.tsx  | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/apps/csm-portal/webapp/src/features/csm-cases/components/CsmCaseCommentBubble.tsx b/apps/csm-portal/webapp/src/features/csm-cases/components/CsmCaseCommentBubble.tsx
index 9932ce8cfa..d04160fb0d 100644
--- a/apps/csm-portal/webapp/src/features/csm-cases/components/CsmCaseCommentBubble.tsx
+++ b/apps/csm-portal/webapp/src/features/csm-cases/components/CsmCaseCommentBubble.tsx
@@ -245,6 +245,12 @@ export default function CsmCaseCommentBubble({
             sx={{
               flex: 1,
               minWidth: 0,
+              // A system entry is backend HTML too, so it needs the same width
+              // containment as a regular comment body — see the full note on the
+              // rich-text host below for why `min-width: 0` alone doesn't hold.
+              maxWidth: "100%",
+              contain: "inline-size",
+              overflowX: "auto",
               overflowWrap: "anywhere",
               wordBreak: "break-word",
               "& p": { m: 0 },