seek-oss/playroom

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

kelyvin opened this issue · 1 comments

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:

Screen.Recording.2021-08-23.at.5.43.16.PM.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:

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!

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