fix(react): allow preview panel to be fully collapsed

[isaacplmann]

My tutorial does not heavily use the preview panel, but always uses the terminal. This change allows the terminal to be open and the preview panel to be collapsed all the way (by the user). The initial size of the preview panel stays the same.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[isaacplmann]

Seems like the multiple preview window e2e test is flaky. Even locally it will pass and not pass on subsequent runs without changing the code.

[AriPerkkio]

@isaacplmann could you show screenshots of before-after this change?

I haven't seen that test case being flaky before. Could it be that it becomes flaky with this change when window is smalle enough?

[isaacplmann]

When you click Toggle Terminal this is what the preview panel looks like both before and after the change.

Before the change, this is the smallest you can make the preview panel:

After the change, you can completely hide the preview panel with the terminal:

Here's an image of the e2e test passing locally:

[isaacplmann]

Here's a screenshot of the user can see multiple preview tabs e2e test failing on main. I had to run the e2e tests 5 times before the test failed.

[pkg-pr-new]

Open in StackBlitz

@tutorialkit/astro

npm i https://pkg.pr.new/@tutorialkit/astro@445

@tutorialkit/react

npm i https://pkg.pr.new/@tutorialkit/react@445

@tutorialkit/theme

npm i https://pkg.pr.new/@tutorialkit/theme@445

@tutorialkit/types

npm i https://pkg.pr.new/@tutorialkit/types@445

@tutorialkit/runtime

npm i https://pkg.pr.new/@tutorialkit/runtime@445

commit: a54374a

[AriPerkkio]

Looks good, thanks! 💯