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

[Harshit-7373]

@raclim This issue is solved now you can close this issue.

In the uploaded image , You can see that the issue no longer persists.

[raclim]

@Harshit-7373 I just tried it out and this issue is still persisting for me. I think you have to ensure that you're previewing the image by clicking on the image file and viewing it in the editor. I'll post some screenshots of what I'm seeing below.

SVG Uploaded to the Editor:

SVG Preview Disappearing When Resizing Browser Window:

SVG Preview in Mobile View:

[Harshit-7373]

@raclim I have found the issue . Yes the issue still persists. I will look into it and will surely create a PR that will solve this issue.