Resolve known styling issues with Web IDE collapsible sidebar

Other styling issues

These are issues with styling which were found as part of the original issue, but never resolved.

Fix blue focus staying after button click.

  • Add a blur on click to remove focus blue highlight on buttons

Mismatch height

Also, as part of this issue, we need to fix the mismatch IDE header height in the icon vs the text:

mismatch-ide-header-height

Text alignment

.ide-sidebar-project-title is not aligned with the left border of the content below the title as it used to be.

Before: before

After: after

See &2585 (closed) for more context.

Edited by 🤖 GitLab Bot 🤖