localhost displays incorrect mobile design due to legacy mobileFirst components

[PiyushChandra17]

p5.js version

2.9.0

What is your operating system?

None

Web browser and version

Chrome and 117.0.5938.132

Actual Behavior

p5 sketches examples not showing in full height on mWeb(chrome) and mWeb(safari), it's not responsive.

Expected Behavior

p5 sketches examples should work properly on small screens ie. mWeb(chrome) and mWeb(safari). It should be responsive.

Steps to reproduce

Steps:

1. Open the editor app on either mWeb(safari) or mWeb(chrome)
2. Press the three dots
3. Press on Examples
4. Notice the example page, it should take the full height of the screen

[lindapaiste]

You should set MOBILE_ENABLED=false in your .env file and that will fix it for your development environment.

We need to do some cleanup of what you see when you run localhost. We have a set of "experimental" mobile components from a few years ago which you will only see on localhost and with the .env variable MOBILE_ENABLED=true. The new responsive design is always enabled and doesn't use any .env feature flags. Some of the old mobile components got a bit messed up by the new styles which is what you are seeing.

@raclim We for sure need to remove all of the component={mobileFirst(MobileIDEView, IDEView) switching from the routes.jsx. I think it also makes sense to delete the component file (MobileIDEView.jsx, etc) if it is no longer used, since that is confusing to contributors. See #2555

@PiyushChandra17 I'm going to keep this issue open but edit it to reflect the core problem which is the legacy code.

[PiyushChandra17]

@lindapaiste Yes it's slightly confusing for the contributors who are relatively new. Thanks!