Big gap in side-bar appears & breaks positioning

[Liquidream]

Hi,

I've just stumbled across Trizbort and it's great - I really wanna use it to map out my next game.
However, it seems the current build has an issue where, after opening the properties side-bar pane - an additional "gap" appears.

CORRECTION: This only happens if you Double-Click an item (using the ellipse [...] button is ok)

Unfortunately, it's not just aesthetically annoying - as this gap also throws off the mouse position for clicking and using the editor (making it effectively unusable). 😥
(It's fine when it first loads - it only seems to happen after opening the properties pane)

Tested in: Brave, Edge "Chromium"

[Liquidream]

Ok, I'm not really a web developer, but I've noticed that if you temporarily disable the transition style that the side-panel (.panel) uses, that seems to resolve the issue.

While it might be a hack, I'm might just run with it - if it'll let me use the tool for now! 😅

[jeremydouglass]

I can confirm that this also happens in Chrome Version 81.0.4044.129 (Official Build) (64-bit) on macOS.

It is a real problem, because it makes the left-hand controls inaccessible -- so the hamburger menu with Save / Export is lost, and work cannot be saved.

[jeremydouglass]

Here are screenshots:

[jeremydouglass]

I can confirm that removing css transitions from .panel fixes the problem here.

Those seem to be here:

https://github.com/henck/trizbort/blob/master/styl/panel.styl

I can make a pull request if you like.

[henck]

I want to thank both of you (@Liquidream, @jeremydouglass) for your clear feedback and screenshots. I have disabled the panel open/close animation, hoping that this does indeed solve the problem.

[jeremydouglass]

Thanks! I just tested it on the live site, and the deployed fix worked in my browser -- the gap no longer appears, no matter how I activate and close menus.