Code Block: Highlighted white space overflows

[Rishit30G]

Description

Currently, if text within a code block is highlighted and contains extra white spaces, it may overflow outside the code box, which is undesirable. Although this scenario is rare, but it impacts the overall UI experience when it occurs.

Step-by-step reproduction instructions

1. Create a new post
2. Add a Code Block to it
3. Add some code to the code block
4. Add some extra whitespace after the end of a line
5. Highlight the whole code snippet with a distinguishing colour
6. Notice the highlighted whitespace overflows the code box

Screenshots, screen recording, code snippet

Environment info

• WordPress 6.7.2
• Gutenberg Version 20.5.0
• MacOS Sequoia
• Google Chrome

Please confirm that you have searched existing issues in the repo.

• [x] Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• [x] Yes

Please confirm which theme type you used for testing.

• [ ] Block
• [ ] Classic
• [ ] Hybrid (e.g. classic with theme.json)
• [ ] Not sure

[Rishit30G]

There is a potential solution to this by changing white-space: pre-wrap to white-space: break-spaces. However, the concern with the break-spaces is that it is relatively new.

Moreover, as mentioned, it's very unlikely that this issue will occur, so I would appreciate some feedback before making any changes. 🙇🏻

Sharing a screenshot of the fix: