Turning off Wrap lines breaks layout with certain long strings

[regeter]

User: regeter
Sample URL: https://jsfiddle.net/regeter/4s0eL1f9/148/

When signed into my user I do not see the "Run Bar" headerActions. I do not see the result window.
I can access this same url/fiddle after I signed out and I have the Run/Save bar.
So this appears to be related to my "Pro" status?

This has been the status since about 6 months I would guess.
Overall disappointed in JSfiddle, also because my other issue #1921 got closed.

[oskarkrawczyk]

First time I'm seeing this problem.

• What's the browser version?
• Is it the case on all browsers?
• Can this be caused by a content blocker?

[oskarkrawczyk]

Definitely looks like a browser problem, since the layout on the screenshot is all messed up.

[regeter]

Chrome: Version 134.0.6998.119 (Official Build) (arm64)
Brave: Version 1.76.74 Chromium: 134.0.6998.89 (Official Build) (arm64)
Safari: Version 18.0 (19619.1.26.111.10, 19619)

I just saw that for some fiddles it still shows the headerActions
For instance it still shows for:
https://jsfiddle.net/regeter/tf8urcpm/46/
(For all Browsers)

But not for:
https://jsfiddle.net/regeter/fxk6qLn1/74/
(For Chrome it still shows the result, but not the headerActions, for Brave and Safari it also does not show the result)

I am not sure this only the browser, the primary difference if this works or not is if I am singed in or logged out.

[oskarkrawczyk]

Interesting, and for a completely blank fiddle when you're logged in - are actions still missing?

[regeter]

blank fiddle looks fine.
(this is Safari)

[oskarkrawczyk]

Ok, that helps a lot. I'll investigate the issue in the morning.

[oskarkrawczyk]

The issue should be now fixed – some code was breaking out of a JS string, messing up the document HTML structure.

Thanks for reporting this in.

[regeter]

I agree that fixed a few of them, but not all of them.
The JS string issue is likely still present when the JS code is entered in the HTML field.

See this JSFiddle that still has the headerActions issue.
https://jsfiddle.net/regeter/74buk28o/4/

It also works when I am logged out.

[oskarkrawczyk]

At this point I'm running blind because I cannot replicate.

Can I ask you to check two things on the broken layout page? In the Inspector, remove two elements:

First selector: .fiddleAuthor

Second is a script tag:

Does this fix the layout issues?

I'm guessing here, but having this info might help pinpoint the problem.

Thanks!

[regeter]

Hey, I deleted these two via dev tools.

I am not sure that deleting a script node would do anything tho?
Deleting .fiddleAuthor changed the layout, but didn't bring back the actionBar.

Are you sure you are logged in with a Pro account? This ONLY reproduces when logged in.

[oskarkrawczyk]

I am not sure that deleting a script node would do anything tho?

It would, since there's embedded HTML inside a JS string.

Deleting .fiddleAuthor changed the layout, but didn't bring back the actionBar.

Any chance you could provide a screenshot of how it looks when you remove .fiddleAuthor?

Are you sure you are logged in with a Pro account? This ONLY reproduces when logged in.

Yes I am, and it makes no sense to me why that would change anything.

I see you are well versed in frontend dev, is there ANY chance you have time to poke around the layout with devtools and see if removing anything else would fix the layout? Pershaps starting with the editor panels (one by one)?

I'd like to fix this problem but no matter what I do, I cannot replicate it.

[oskarkrawczyk]

Ok, I believe I was looking at the completely wrong thing.

On the broken layout, ⌘+X all HTML - that automatically resolves the problem right?

In Editor Settings, turn Wrap lines on, and ⌘+V the code back.

Layout stays intact?

[oskarkrawczyk]

Closing as a duplicate of #1883

Leaving the previous open since it's the older one.