Enhancing usability + layout of interactive studies (notebook 1440x900)

[visualdenniss]

With the current layout, when creating content for interactive studies, the informational boxes inside the notation column cover the entered moves and analysis, making it inconvenient to work with.

In the example above, no moves are visible because informational boxes such as “Help the player…” or “Optional, on-demand hint…”, along with the text areas, completely cover the notation. Also note the small green line between the “Give the player…” textarea and the pockets. That thin line is actually the top of the Opening Explorer, which is open in the screenshot but entirely covered, leaving no way to make use of it.

Additionally, I personally find it confusing that clicking “Help the player find the initial move with a comment” prompts input in one textarea, while another textarea labeled “Give the player a tip so they can find the right move” appears below. The wording of these two prompts is very similar, which makes their intended distinction unclear.

For the reasons outlined above, it would be great to improve the layout, structure, and wording in a way that keeps the moves clearly visible—or at least provides sufficient space for them—while still offering helpful guiding texts such as “Help the player…” and related prompts. I have not made deep thoughts on this to provide any suggestions, however I am happy to help or give feedback if there is a suggestion. Thanks.

[Siderite]

As a workaround (and maybe a possible template for a solution), you can use the LiChess Tools extension. It features a collapsible interactive lesson section as well as a resizable Explorer.

[ornicar]

The screenshots are a bit of an extreme use-case, with a tiny viewport and the crazyhouse pockets displayed.

With the most common computer screen resolution (1920x1080) it looks like this

with ample room for moves and lesson editor

[visualdenniss]

Thanks a lot for the responses. The screenshots were taken on Macbook Air notebook with full viewport. Here is how it looks with board resized to almost full viewport height to create maximum space:

Screen resolution: 1280x800 (which is what I always use as the text size is the most convenient for me personally)

And screen resolution: 1440x900

This is most I can get on my notebook, without making text size extremely tiny by using 1680x1050 (the highest display option for more space - but texts become very small).

In your screenshot it looks perfectly fine, but unfortunately I cannot achieve that. So I guess this issue mainly occurs on notebook sizes / or at least the resolution sizes I've shared above.