Fix: Resolve layout shrink issue of Monaco editor on handbook toggle

[SaeWooKKang]

It seemed like a simple problem, so I didn't make the issue first. Please let me know if you have any problems. Thank you always.

What this PR solves

• Resolve layout shrink issue of Monaco editor on handbook toggle

Summary

• When I click the help button, the 'showCode' function is called, and inside sandbox.editor.layout() failed to calculate the layout normally. So I solved it by putting width, height in the parameter
• I thought it would be okay to calculate it as 210px, which is the area of the 'navigation-container(class name)' area, but there was a slight error. So I applied it as 200px. Is there a better way to calculate it?

Steps to Reproduce

1. Go to typescript playground
2. Toggle the 'help' button in the sub-navigation area.

2024-06-21.7.26.43.mov

Modified screen

2024-06-21.7.41.36.mov

[orta]

The random 200 feels pretty arbitrary, what happens if you add a setTimeout with 100ms and then trigger the relayout instead?

[SaeWooKKang]

@orta Thank you for your better suggestion. As you said, it seems to have been a matter of the order of execution.

So instead of running setTimeout, I changed the order in which showCodes are executed in the sideNavForHandbook function to the bottom.

AS-IS

The existing code area was occupied except for the handbook area.

TO-BE

After the handbook area was removed from dom, the layout was changed to be calculated.

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://victorious-plant-05c166c10-3164.centralus.5.azurestaticapps.net

[orta]

Great, yeah that feels good 👍🏻

[jakebailey]

Thanks!