Readabiliy improvement panel hides the content of the showcase website

[Gruximillian]

The readability improvement component buttons hide the content of the complete website. There is no way to undo it other than reloading the page.

https://bovacademy-opensource.github.io/evolution-ui/#site-section-23

@rafael-nunez

[rafael-nunez]

Hi @Gruximillian

I wasn't sure what you were seeing until I tried Firefox. Is that what you're using? I tried yesterday and today to fix this, but fixing it for Firefox is going to take much longer. At different screen widths I see the problem so it is partly related to the media queries of the site, but I also think there are other css rules from other components that are causing problems. For now, it is best to not include it, I think.

[Gruximillian]

@rafael-nunez
Yes, I tried in Firefox. Maybe you need to ensure your component is safely namespaced, to write all the rules in a way that they can't be overriden by other components.

[rafael-nunez]

It's a little more complicated. All of my stuff is namespaced. I may have found a fix but it still requires everyone else's rules to be namespaced. Especially whoever is using .hide and .h-hide. until then it is not suitable for Firefox.

[Gruximillian]

@rafael-nunez
Oh those helper clasess are not namespaced... damn. I don't use one I think.