Fix mobile fullscreen UI

[LucaCras]

Issue: #17808

What Pepijn and I did

• Show fullscreen toggle button on mobile UI
• Hide nav when fullscreen active

How to test

Open an example storybook, change the screen size to < 600px, then check if the fullscreen button is visible and whether the nav is hidden when fullscreen is active.

• Is this testable with Jest or Chromatic screenshots?
• Does this need a new example in the kitchen sink apps?
• Does this need an update to the documentation?

If your answer is yes to any of these, please make sure to include it in your PR.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit c07e5d1. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 1 target

• nx run-many --target=prepare --all --parallel --max-parallel=15 -- --optimized

---

Sent with 💌 from NxCloud.

[yannbf]

Hey @LucaCras and @Pepijnk12 thanks a lot for this!! I noticed a small detail I wanted to share with you.

The full screen functionality on mobile is not 100% fullscreen because the height of the story doesn't change, it's only the tabs which get hidden, This means that the scroll area is not taking the entire screen as you can see here:

I highlighted some css which is taking the nav height into account, which is why it's not 100% fullscreen. Could you take a look at that? Thanks!!

[LucaCras]

Hey @LucaCras and @Pepijnk12 thanks a lot for this!! I noticed a small detail I wanted to share with you.

The full screen functionality on mobile is not 100% fullscreen because the height of the story doesn't change, it's only the tabs which get hidden, This means that the scroll area is not taking the entire screen as you can see here:

I highlighted some css which is taking the nav height into account, which is why it's not 100% fullscreen. Could you take a look at that? Thanks!!

Hey @yannbf, thanks for pointing this out! Totally missed it ;)

But I have added a change that should fix this. Let me know if I did it correctly

[kylegach]

This looks great, @LucaCras! Thank you again for the helpful improvement and the responsive (no pun intended 😝) back-and-forth!