Fullscreen height

[LukaszMMazur]

No description provided.

[mazurroman]

Hey @LukaszMMazur thank you for your contribution! There are a few improvements we would like to see before accepting this PR. Namely:

• The app, when in fullscreen, doesn't expand all the way to the bottom. See screenshot attached from my screen.
  

• Fullscreen mode should temporarily hide the top banner. Currently, the banner stays visible which looks broken. See screenshot:
  

• When I click "Compile and run", the app expands vertically. What we want instead is to keep the height constant so that there are no jumps. It would be great to fix that as part of this issue. See video attached.

CleanShot.2024-03-20.at.09.01.48.mp4

[mazurroman]

It's starting to look really really good, great job @LukaszMMazur !!

I added some minor comments into the code. On top of that, here are some improvements we can do to make it really shine:

In non full screen mode only:

• Make the app a bit taller by default, i.e. by 20-30%
• Set static height for the dark section in the bottom, so that it doesn't jump when the "Compiler version" text appears

In full screen mode only:

• Replace "Cairo VM Playground" with the cairovm.codes logo
• Copy "fullscreen", "dark mode" and "cmd + k" buttons into the dark info bar at the bottom of the screen (the same one that holds "compiler version"), so that the buttons are available also in full screen. Position the buttons to the right of the info bar
• Add text "Made with 🖤 by Walnut" to the dark info bar at the bottom of the screen, next to the "fullscreen" etc buttons. Walnut should be a link that opens walnut.dev
• Expand the app 100% width and height, no need to have extra white margin around the app when in full screen. Careful about the rounded border corners - they should not be rounded when in full screen so that the app fills the full space

[mazurroman]

Better not to render the component at all in case its full screen, instead of using hidden class.

See the "Inline If with Logical && Operator" section here: https://legacy.reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator

So it will look like:

!isFullscreen && (
  <div className ... ></div>
)

[mazurroman]

can you use the cn object for assigning conditional classes (import cn from 'classnames')