fix(issues): Wrap annotated issue messages (#45002)

Adds text wrapping to the issue message when it includes annotated text
fixes #44995

static/app/components/events/meta/annotatedText/annotatedTextValue.tsx

@@ -22,6 +22,7 @@ export function AnnotatedTextValue({value, meta, organization, project}: Props)
           if (chunk.type === 'redaction') {
             return (
               <Tooltip
+                skipWrapper
                 title={getTooltipText({rule_id: chunk.rule_id, remark: chunk.remark})}
                 key={index}
               >
@@ -56,7 +57,5 @@ export function AnnotatedTextValue({value, meta, organization, project}: Props)
 }
 
 const ChunksSpan = styled('span')`
-  span {
-    display: inline;
-  }
+  word-break: break-word;
 `;

static/app/components/events/meta/annotatedText/redaction.tsx

@@ -1,14 +1,6 @@
 import styled from '@emotion/styled';
 
-type Props = {
-  children: React.ReactNode;
-  className?: string;
-  withoutBackground?: boolean;
-};
-
-export const Redaction = styled(({children, className}: Props) => (
-  <span className={className}>{children}</span>
-))`
+export const Redaction = styled('span')<{withoutBackground?: boolean}>`
   cursor: default;
   vertical-align: middle;
   ${p => !p.withoutBackground && `background: rgba(255, 0, 0, 0.05);`}