fix(UI): minimize the fixed contents upper the editor

[mmatsumoto1026]

Checklist:

• I have read and followed the contribution guidelines.
• I have read and followed the how to open a pull request guide.
• My pull request targets the main branch of freeCodeCamp.
• I have tested these changes either locally on my machine, or GitPod.

Partially address issues #53660 and #49054

This PR was opened to minimize the fixed contents upper the editor such as breadcrumb and a file display button in monaco-editor-tabs in Step challenges so that partially addressing the original issues as first step.

When the viewport height is equal to or less than 600px 900px mobile layout is displayed, the breadcrumb upper the editor moves into the description-container in the Step challenges.

On the other hand, if there is only one file to display on mobile layout, monaco-editor-tabs will be empty and the button to switch the file display will not be displayed .

By using gitpod, the code was tested with following environment.

1. Windows 11 Home PC using Chrome, Firefox, Edge, and Brave browser, or, webkit within the Playwright.
2. Android Studio's emulator(Nexus One with Android API 33 system image and Pixel 6 Pro with Android API 34 system image) using Chrome.
3. iPhone SE (iOS 15.7.8) using Chrome and Firefox browser.

[Sembauke]

@ahmaxed Can you take a look at this?

[bbsmooth]

This is definitely an improvement. At 400% zoom (e.g. 320x256 px viewport) I can see about 4.5 lines of code instead of three, so we gained almost two lines. I'm wondering if we can do better. We could remove some of the top/bottom padding around both the tablist and file buttons. And we could remove some of the top/bottom padding in the tabs and buttons themselves. Yes, things will be a little more scrunched up in the header, but at such extremes zoom levels I think that editor space is more important than aesthetics. We could make these more extreme changes a smaller height, such as beginning at 600 or even 500px.

[mmatsumoto1026]

Thanks for your review and comment, @bbsmooth.

I'm wondering if we can do better. We could remove some of the top/bottom padding around both the tablist and file buttons. And we could remove some of the top/bottom padding in the tabs and buttons themselves.

I definitely agree with you.

Although, as you mentioned, with removing the paddings, the fixed contents above the editor will be scrunched up, and I personally think that this will increase the possibility that users will tap the unintended button or tab on ordinary small devices, which can reduce usability.

Therefore, the EX_SMALL_VIEWPORT_HEIGHT = 300; and @media screen and (max-height: 300px) are defined and used to trigger making the spaces less.

The 300 thresh was used:

1. to ensure the space removing will occur when the camper zoom in to 400% on laptop PC(but only considering for #mobile-layout).
2. to avoid unexpected space removing on smartphones (such as iPhone 13 PRO and Google Pixel 6 pro) when the software keyboard is opened. Actually, on extremely small devices such as iPhone SE or Nexus One, the space removing will occur when the software keyboard was opened, but without the behavior, these devices almost can not display the code editor part.

I think the thresh value should receive more thorough review, as I have only used Android Studio's emulator and Chrome's mobile simulator to determine this value.

With removing some of the paddings, the camper can see six lines of code when opening the multifile editor and zoomed in 400% as shown in below image.

After removing some paddings around both the tablist and file buttons

[ahmaxed]

Thanks for optimizing the mobile UI.
I might be missing something, but this is what I get for the first challenge on mobile and desktop. The breadcrumbs are not in the instructions on mobile and the index.html button is missing on desktop. file buttons should be displayed on desktop in case users wants to open or close a pane completely.

[mmatsumoto1026]

Thanks for your review, @ahmaxed.

The two issues you mentioned are occured with my misunderstanding of latest original issue report of yours, especially
I oversighted that viewport height of the mobile layout snapshot of the original issue (It was tall enough to contain all mobile devices).
Therefore, the fixed code was pushed to address all issues mentioned in this PR.

[ahmaxed]

This feature would go greatly with a unit test so we could lock it in.

[mmatsumoto1026]

I'm not sure whether this is the best approach, with using the isMobile property, the e2e test for breadcrumb was updated for this new feature.

[ahmaxed]

I'm not sure whether this is the best approach, with using the isMobile property, the e2e test for breadcrumb was updated for this new feature.

I will leave this one to our playwright expert: @Sembauke.

Bootstrap has just been removed so I recommend merging main and resolving the conflicts.

Other than that this should be good to go.