How to hide photopea ads

photopea-hide-ads.md

Open console and run this for 0px width ads. (ads still working, adjust width size to suite your need)

document.querySelector("body > div.flexrow.app > div:nth-child(2)").setAttribute('style','max-width:0px')

document.querySelector("body > div.flexrow.app > div").setAttribute('style','width:100%')
document.querySelector("body > div.flexrow.app > div > div.flexrow > div.panelblock.mainblock").setAttribute('style','width:100%')
const style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.fixme { min-width:fit-content;overflow:unset; }';
document.querySelector("body > div.flexrow.app > div:nth-child(1) > div.flexrow").appendChild(style)
document.querySelector("body > div.flexrow.app > div:nth-child(1) > div.flexrow > div.sbar.toolbar").className += " fixme"

Or completey remove ads (not cool for them tho, ads completely gone = no money = no good app)

document.querySelector("body > div.flexrow.app > div:nth-child(2)").remove()

document.querySelector("body > div.flexrow.app > div").setAttribute('style','width:100%')
document.querySelector("body > div.flexrow.app > div > div.flexrow > div.panelblock.mainblock").setAttribute('style','width:100%')
const style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.fixme { min-width:fit-content;overflow:unset; }';
document.querySelector("body > div.flexrow.app > div:nth-child(1) > div.flexrow").appendChild(style)
document.querySelector("body > div.flexrow.app > div:nth-child(1) > div.flexrow > div.sbar.toolbar").className += " fixme"

HINT : Hide for more space purpose only, Do click ads to keep photopea web app alive :)

Thanks for this! I converted/encoded the first version to a bookmarklet format so you can have a 1-click button in your favourites:

javascript:document.querySelector("body>div.flexrow.app>div:nth-child(2)").setAttribute('style','max-width:0px');document.querySelector("body>div.flexrow.app>div").setAttribute('style','width:100%');document.querySelector("body>div.flexrow.app>div>div.flexrow>div.panelblock.mainblock").setAttribute('style','width:100%');conststyle=document.createElement('style');style.type='text/css';style.innerHTML='.fixme{min-width:fit-content;overflow:unset;}';document.querySelector("body>div.flexrow.app>div:nth-child(1)>div.flexrow").appendChild(style);document.querySelector("body>div.flexrow.app>div:nth-child(1)>div.flexrow>div.sbar.toolbar").className+="fixme";

This still leaves an empty space for me, any workaround for this?