Lower z-index on "Show code" button

[kylemh]

Issue:

What I did

Removed set z-index from the div that wraps the "Show code" button in a story preview block. I don't wanna get into a fight with z-indeces anywhere - least of all within Storybook. My modals are rendered via portals which should be last in the DOM beating any z indeces; however, in Storybook, those portals are rendered within the preview block's iFrame, meaning they aren't rendered last.

Before

After

┆Issue is synchronized with this Asana task by Unito

[shilman]

Looks like zIndex was added for this:

#11502 (comment)

Can you investigate?

[kylemh]

@domyen that video is 404ing from Loom. Do you remember the problem?

Ah never mind, I see #11686

[kylemh]

@ndelangen so I am using portals, but they render at the bottom of the body within the iFrame, meaning the "Show code" button appears after it in the page's DOM, so that's not a solution.

[MichaelArestad]

Right. I did a few tests and I can confirm that the actions can't be used in some scenarios without the add z-index: 1. It looks like there is a div with the classos-padding that has a z-index: 1 which makes those actions inaccessible when their z-index is removed.

I tried changing the os-padding z-index to 0 and that seemed to work, but may break something else. I'm not familiar with what is adding those styles, but I think it has something to do with scrollbars. @kylemh perhaps investigating that route further could prove fruitful?

[kylemh]

@MichaelArestad zIndex 0 solved my issue. Committed here so you can see the result in terms of Storybook (rather than just my Storybook usage).

[MichaelArestad]

@kylemh Right. I tried that yesterday. You can see on the Docs/DocsPage story in the published storybook that the "Code" button is no longer clickable.

[MichaelArestad]

Because this is breaking functionality and seems to be inactive, I'm going to close this PR. If you would like to try another iteration, I would be happy to reopen it. Thank you for contributing.