When resizing the window uploaded image gets greyed out and shifts to bottom

[PiyushChandra17]

p5.js version

2.9.2

What is your operating system?

Mac OS

Web browser and version

Chrome and 117.0.5938.132

Actual Behavior

When resizing the window uploaded image gets greyed out and shifts to bottom

Expected Behavior

When resizing the window uploaded image should not get greyed out and should remain at its initial position. Perhaps it's not fully responsive at some extent, also the width of the side bar is unnecessarily large and i think this is the root cause

Steps to reproduce

Steps:

1. Open the editor web app
2. Click on sidebar expand icon
3. Click on "+"
4. Click on upload file
5. Upload an image
6. Resize the widow
7. Verify the image gets greyed out and shifts to bottom

[lindapaiste]

Good catch. It is not just while resizing. Previewing an image is messed up when in the mobile size range. I'm seeing the image show up below the code editor. We should be just showing the image (AssetPreview) and not showing the editor at all when you are viewing a media file. It is hidden via CSS when on desktop but not on mobile.

p5.js-web-editor/client/modules/IDE/components/Editor/index.jsx

Lines 504 to 508 in 411ff89

	const editorHolderClass = classNames({
	'editor-holder': true,
	'editor-holder--hidden':
	this.props.file.fileType === 'folder' || this.props.file.url
	});

[Akhilbisht798]

Hey, i am not sure about the greyed part of this issue but i can confirm that the image is shifting toward the bottom of the screen.

[Akhilbisht798]

                <EditorHolder
                  ref={(element) => {
                    this.codemirrorContainer = element;
                  }}
                  className={editorHolderClass}
                />

I think this will solve the problem, but I am not able to test it because It requires a s3 bucket to upload a file.
And I don't have one so

[aditya123473892]

@lindapaiste can i be assigned with issue if no one is working on it