Responsively-app: When devtools is right-docked, items above cannot be clicked

[alanw83]

🐞 (Original) bug report

✍️ Description

If I try and open the Live CSS editor when devtools is open it won't all me to open the live css editor. I have to open live css editor then dev tools to have them both open at the same time.

🕵🏼‍♂️ Is this a regression?

Live CSS editor was not in previous version

🔬 Minimal Reproduction

Open program
Load website
Toggle Live CSS Editor to on
Inspect an element to open dev tools
Attempt to toggle off the Live CSS editor - Hand to click does not appear

🌍 Your Environment

🔥 Exception or Error or Screenshot

see: https://github.com/responsively-org/responsively-app/issues/530#issuecomment-722350840

[open-collective-bot[bot]]

Hey @alanw83 :wave:,

Thank you for opening an issue. We will get back to you as soon as we can. Also, check out our Open Collective and consider contributing financially.

https://opencollective.com/responsively

PS.: We offer priority support for all financial contributors. Don't forget to add priority label once you start contributing :smile:

[jjavierdguezas]

Hi @alanw83 , I couldn't reproduce it.
This is my environment

Version: 0.15.0
Electron: 9.3.1
Chrome: 83.0.4103.122
Node.js: 12.14.1
V8: 8.3.110.13-electron.0
OS: Windows_NT x64 10.0.18362

Could you please share your environment? (Press F1 on the app then click Copy button and paste the info here)
Could you also share a gif or a video showing the issue?

[alanw83]

Version: 0.15.0
Electron: 9.3.1
Chrome: 83.0.4103.122
Node.js: 12.14.1
V8: 8.3.110.13-electron.0
OS: Windows_NT x64 10.0.19041

https://drive.google.com/file/d/1xJvX8Gglxb2y_ybWFXqkXrm_TIbwuSlv/view

Hopefully this works and helps!

[jjavierdguezas]

Thanks for the info @alanw83

I keep the devtools docked to the bottom, that is why I couldn't reproduce it. Now I did,

I think you found a more complex issue: when the devtools is docked to the right side of the app, it seems that it is positioned on top of the elements that are above, preventing them from being clicked

I mean, not only does the Live CSS Editor toggle button stop working, but all buttons stop working as well. Also, if you make the devtools wider, you won't be able to click on the right side of the navigation bar or the action buttons found there.

cc: @manojVivek

[Zoeinfp]

I can try to set correctly the bounds of the panel for having the buttons available to the user's click.
Edit : I have tried without success ... Maybe someone else will fix this.