Toggling wrap lines off can break fiddle page

[kmnunley]

Issue

Toggling the "Wrap Lines" option in the editor settings can break the formatting of the fiddle page if the code has long lines present.

Behavior

As an example, if the HTML has long lines, such as an inline SVG or an unbroken paragraph, toggling the Wrap Lines option to off will result in the HTML panel pushing any panels to the right off the page. These panels become inaccessible.

Additionally, the top-right navigation is pushed off-page as well. This makes the state unrecoverable and the user must exit the current fiddle in order to toggle the Wrap Lines option back off.

This behavior is present in all panel layout schemes.

Expected Behavior

Toggling the Wrap Lines option should preserve the current panel layout. Panels with long lines should be horizontally scroll-able.

The top bar navigation should not be affected by the content of the code panels.

Client Info

Firefox 130.0 64-bit (no extensions enabled)
Windows 11 Pro V. 23H2 (22631.3880)

[oskarkrawczyk]

@kmnunley Thanks for reporting this in, do you have a specific fiddle for me to test?

[kmnunley]

@oskarkrawczyk You can see the behavior in this fiddle: https://jsfiddle.net/knunley/e3w07ta9/38/