single-spa / single-spa-playground

A website that helps you set up single-spa
http://single-spa-playground.org
MIT License
39 stars 10 forks source link

Failed to Override The the Style button because of the main application Z-Index above the button #61

Open RFTaurus opened 4 months ago

RFTaurus commented 4 months ago

Description

Hello guys, I want to report a finding that I found on Single-SPA playground, So I want to try how Single-SPA playground will guide me to see if my applications works (Actually I can successfully make it works on my local using Single-SPA Vue Example). here is the screenshot below

image

because of it, I want to know how it works on playground so I try to play around with it, but turns out, I got stuck when tried to verify it on Step 1 because it always told me that my applications failed because of my @vue-mf/styleguide

image

Curious about it, I see the text above which told me to try using the devtools on the bottom-right corner which is this one

image

but when I tried to click it, I always failed to do it, so I think maybe it only show and I need to enable it manually, so I tried to add devtools: true on my Local Storage like this

image

but it seems still failed, So I got curious and tried to inspect it, and turn out it seems the playground main wrapper using z-index and and it blocked the override button and make it can't be clicked

image

So when I tried to disabled it, it works and I can click it again to override my styles

image

Propose Solution

I think we can exclude the z-Index on the playground or at least adjust it so we can use this override button again

image