Hover state removes the gap between logo block and “Back to Editor” button

[BamaCharanChhandogi]

Increasing Access

In the p5.js Web Editor, the header has a small gap between the p5* logo block and the “Back to Editor” button.
On hover, the hover background expands incorrectly and fills that gap, causing the two blocks to visually merge.
This is inconsistent with the default layout and looks unintended.

Additionally, the left-arrow icon becomes hard to see on hover.

Feature enhancement details

The hover state removes the small gap between the p5* logo block and the “Back to Editor” button. On hover, the background expands into that gap, making both elements look merged. The left-arrow icon also becomes hard to see.
Please keep the gap visible on hover and ensure the arrow icon stays clearly visible.

[SatyamKumarCS]

Hi! I’d like to work on this issue.
Could you please assign it to me once it’s approved by the maintainers?
Meanwhile, I’ll start looking into the codebase and understanding the related components.

Thanks!

[SinhaS12]

Hi! I’d like to work on this issue.

The hover background of the “Back to Editor” button currently expands into the small gap next to the p5* logo block, causing both sections to visually merge. The left-arrow icon also loses contrast on hover.
I can submit a fix that:

preserves the gap in all hover states

keeps the arrow icon clearly visible with consistent contrast

Please assign this issue to me. I’m happy to take it on.