[8.18] [ResponseOps][Cases]Horizontal scrolling in cases' comments overflows sidebar (elastic#218107) (elastic#218216)

# Backport

This will backport the following commits from `main` to `8.18`:
- [[ResponseOps][Cases]Horizontal scrolling in cases' comments overflows
sidebar (elastic#218107)](elastic#218107)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Georgiana-Andreea
Onoleață","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-04-15T09:06:29Z","message":"[ResponseOps][Cases]Horizontal
scrolling in cases' comments overflows sidebar (elastic#218107)\n\nCloses
https://github.com/elastic/kibana/issues/217994\n\n## Summary\n\nThe
comment section containing a table that requires horizontal\nscrolling
was being visually pushed to the right due to the presence of\nthe user
avatar. To ensure the comment section aligns properly with the\nrest of
the content and doesn't overlap the sidebar reserved for\nconnectors and
custom fields, the `max-width` property was
adjusted\naccordingly.\n\nThe offset comes from: \n- the width of the
euiAvatar--m (which uses the `xl` size token)\n- the left padding of the
`euiTimelineItemEvent`, which corresponds to\n`euiTheme.size.base`
(16px)","sha":"64a2f399d3a1d46809fe7b9b77307ce9e05e583c","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:ResponseOps","v9.0.0","backport:version","v8.18.0","v9.1.0","v8.19.0","v8.17.5"],"title":"[ResponseOps][Cases]Horizontal
scrolling in cases' comments overflows
sidebar","number":218107,"url":"https://github.com/elastic/kibana/pull/218107","mergeCommit":{"message":"[ResponseOps][Cases]Horizontal
scrolling in cases' comments overflows sidebar (elastic#218107)\n\nCloses
https://github.com/elastic/kibana/issues/217994\n\n## Summary\n\nThe
comment section containing a table that requires horizontal\nscrolling
was being visually pushed to the right due to the presence of\nthe user
avatar. To ensure the comment section aligns properly with the\nrest of
the content and doesn't overlap the sidebar reserved for\nconnectors and
custom fields, the `max-width` property was
adjusted\naccordingly.\n\nThe offset comes from: \n- the width of the
euiAvatar--m (which uses the `xl` size token)\n- the left padding of the
`euiTimelineItemEvent`, which corresponds to\n`euiTheme.size.base`
(16px)","sha":"64a2f399d3a1d46809fe7b9b77307ce9e05e583c"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.18","8.x","8.17"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/218107","number":218107,"mergeCommit":{"message":"[ResponseOps][Cases]Horizontal
scrolling in cases' comments overflows sidebar (elastic#218107)\n\nCloses
https://github.com/elastic/kibana/issues/217994\n\n## Summary\n\nThe
comment section containing a table that requires horizontal\nscrolling
was being visually pushed to the right due to the presence of\nthe user
avatar. To ensure the comment section aligns properly with the\nrest of
the content and doesn't overlap the sidebar reserved for\nconnectors and
custom fields, the `max-width` property was
adjusted\naccordingly.\n\nThe offset comes from: \n- the width of the
euiAvatar--m (which uses the `xl` size token)\n- the left padding of the
`euiTimelineItemEvent`, which corresponds to\n`euiTheme.size.base`
(16px)","sha":"64a2f399d3a1d46809fe7b9b77307ce9e05e583c"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.17","label":"v8.17.5","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Georgiana-Andreea Onoleață <[email protected]>

Author: kibanamachine

x-pack/platform/plugins/shared/cases/public/components/user_actions/comment/user.tsx

@@ -51,6 +51,18 @@ const getCommentFooterCss = (euiTheme?: EuiThemeComputed<{}>) => {
   `;
 };
 
+const createCommentActionCss = (euiTheme?: EuiThemeComputed<{}>) => {
+  if (!euiTheme) {
+    return css``;
+  }
+
+  return css`
+    [class*='euiTimelineItemEvent'] {
+      max-width: calc(100% - (${euiTheme.size.xl} + ${euiTheme.size.base}));
+    }
+  `;
+};
+
 const hasDraftComment = (
   applicationId = '',
   caseId: string,
@@ -96,11 +108,7 @@ export const createUserAttachmentUserActionBuilder = ({
           !isLoading &&
           hasDraftComment(appId, caseId, attachment.id, attachment.comment),
       }),
-      css: css`
-        [class*='euiTimelineItemEvent'] {
-          max-width: 100%;
-        }
-      `,
+      css: createCommentActionCss(euiTheme),
       children: (
         <>
           <UserActionMarkdown