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

Closes https://github.com/elastic/kibana/issues/217994

## Summary

The comment section containing a table that requires horizontal
scrolling was being visually pushed to the right due to the presence of
the user avatar. To ensure the comment section aligns properly with the
rest of the content and doesn't overlap the sidebar reserved for
connectors and custom fields, the `max-width` property was adjusted
accordingly.

The offset comes from: 
- the width of the euiAvatar--m (which uses the `xl` size token)
- the left padding of the `euiTimelineItemEvent`, which corresponds to
`euiTheme.size.base` (16px)

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