Auto hide of output box menus

[forrestbao]

Codepod has three menu options for the output box of a code pod, "(un)focus", "Hide", "Clear".
They overlay with the output content (screenshot below).

Expected change:

1. The menu options should only appear when a mouse is hovered over the output box. Remain hidden when not hovered over.
2. When they appear, they should appear above a white background to avoid the overlap that makes reading hard.
3. It's better to lay them out vertically to minimize the overlap with the output content.

[chimmyten]

Hello, it's Timmy. I'm currently working on this issue. If the menu options are laid out vertically, they will go past the output box for shorter outputs. Is it better to expand the empty space for shorter outputs to contain all menu options or leave the menu options going past the bottom of the output box?

[lihebi]

Thanks, Timmy. Nice to see you here!

Maybe put it vertically and above the output area? Like this:

And it should only be shown when hovering over the output area.

[chimmyten]

I moved it up and slightly to the left to avoid overlap with the resizing handle. Does this look okay?

[lihebi]

Looks great.

[forrestbao]

Closed via #336