search

seek-oss / playroom

Design with JSX, powered by your own component library.
MIT License
4.48k stars 182 forks source link

CodeMirror Z-Index overflows on top of Playroom's Toolbar-Sidebar #233

Closed kelyvin closed 3 years ago

kelyvin commented 3 years ago

Hi all,

In the current implementation of Playroom, I can't select any checkboxes within the toolbar sidebar when the Codemirror editor has editable lines adjacent to the checkboxes. See the video below for an example play-through:

https://user-images.githubusercontent.com/1530102/130537699-39ace282-e553-440e-b95f-02d785b50cb7.mov

As you can see in the video, in the first 2 seconds I can select the checkbox no problem. However, as soon as I add more lines of code to the editor, I can no longer select the checkbox (instead it will select the editor line). This is because codemirror editor's zindex overlaps the sidebar.

An easy fix would be to add a z-index specification for the sidebar in the CSS for the following less file: https://github.com/seek-oss/playroom/blob/4a0613274f7b99ae57a6e6d11b5b0c67e946df5d/src/Playroom/Toolbar/Toolbar.less#L22

However, I'm not sure if that is the approach you all want to take. If that's okay, I can create a PR for it.

Thanks!

michaeltaranto commented 3 years ago

I cant reproduce this at the moment, so it may have inadvertently been fixed since. Feel free to reopen if its still an issue.