chore: use pre-wrap for whitespace to break when necessary. (#10245)

Use `white-space: pre-wrap` on event diff lines instead of just `pre`.
This prevents us from getting a horizontal overflow and will instead
wrap the lines if it needs to, but preserve indentation and other spaces
(as explained in [MDN's white-space
docs](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space)).

Means that instead of getting a horizontal overflow and a scroll bar, we
get something like this instead:

![image](https://github.com/user-attachments/assets/d2fab200-6f14-47bc-8d4a-bcbb424fa762)

frontend/src/component/events/EventDiff/EventDiff.tsx

@@ -29,7 +29,7 @@ interface IEventDiffProps {
 const DiffStyles = styled('div')(({ theme }) => ({
     color: theme.palette.text.secondary,
     fontFamily: 'monospace',
-    whiteSpace: 'pre',
+    whiteSpace: 'pre-wrap',
     fontSize: theme.typography.body2.fontSize,
 
     '.deletion, .addition': {