Console snippet to "maximize" the sidebar code editor

So here’s a fun trick I use that I thought I’d share with other devs working in

I have a component we employ across many pages, and this component contains only custom code. Because of this, I wanted a way to be able to see said code in a large window, but also be able to publish code changes without exiting a modal and losing my place in the code. That’s what it’s like to use’s default “fullscreen” code popup/lightbox.

Enter this solution: Click your code element, throw this JavaScript into your dev console, and voila! Fullscreen code view with the “Publish” button always accessible!

The code:

let shoosh = document.querySelector('div[style*="width: 380px;"]') ?? [...document.querySelectorAll('div[style*="width: 300px;"]')].at(-1); = "100vw"; = "100vw"; = 0;
shoosh.querySelector('div.dark-mode-invert').style.height = '75vh';

The result:


Hey @ReavoEnd,

Thank you for the suggestion. We will keep this in mind.