From d7c465fd20a28f786b815df4edf78bead5e6aa92 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Mon, 30 Jun 2025 14:44:51 +0200
Subject: [PATCH] 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 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/component/events/EventDiff/EventDiff.tsx b/frontend/src/component/events/EventDiff/EventDiff.tsx
index 0e43014421..3e4c75bdf2 100644
--- a/frontend/src/component/events/EventDiff/EventDiff.tsx
+++ b/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': {