Bugfix: Insert field value overflow

[loivsen]

Description

Fixes overflow in modal when inserting a field value

Fixes: umbraco/Umbraco-CMS#16491

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

[bjarnef]

Not sure if wrapping lines is the best solution. The old backoffice used scroll on overflow.
Sometimes it improved readability when code lines don't wrap.

Perhaps the component itself could have wrap property to toggle wrapping lines similar to Text/XML/JSON visualizer in Visual Studio and other IDE.

There is also a discussion here about emhancement of the code snippet https://github.com/umbraco/Umbraco.CMS.Backoffice/discussions/1002

[loivsen]

Not sure if wrapping lines is the best solution. The old backoffice used scroll on overflow. Sometimes it improved readability when code lines don't wrap.

Perhaps the component itself could have wrap property to toggle wrapping lines similar to Text/XML/JSON visualizer in Visual Studio and other IDE.

There is also a discussion here about emhancement of the code snippet #1002

I agree that wrapping text would not be an ideal solution for the code block component. 😊 The component already have a built-in scrollbar for horizontal scrolling, so all I had to tweak was the css within the modal that was nullifying the scrollbar.
I considered to expand the modal from small to medium, that way we can read more of the line and the scrollbar isn't so big, but it didn't quite feel right due to the rest of the fairly little content within the modal. 🤔

[leekelleher]

Tested out, the scrollbar appears within the code block. 👍