The invalid image error text overlaps the screenshot added to one of the branches

[data-sync-user]

[Prerequisites]: 

• Have a newly created Nimbus experiment with the “Branches” section not completed yet.
• Have the Nimbus Experiment Page opened.
• Have this image downloaded on your machine.

[Steps to reproduce]:

1. Select the “Branches” section from the Navigation Menu.
2. Upload the image from prerequisites.
3. Observe the error displayed.

[Expected result]:

• The error displayed does NOT overlap the uploaded screenshot.

[Actual result]:

• The error text overlaps the screenshot.

[Notes]: 

• This issue is reproducible on Firefox Nightly 111.0a1 on macOS 12.4.
• This issue is reproducible on any resolution of the browser. 
• Attaching a screenshot of the issue.

┆Issue is synchronized with this Jira Bug ┆Attachments: The invalid image error text overlaps the screenshot added to one of the branches.png

[wangare-i]

hello@yashikakhurana can i be assigned this issue?

[yashikakhurana]

@wangare-i if you are not working, I have to remove your assignment, let me know otherwise tomorrow I will remove your assignment as other applicants are waiting to get assigned, kindly submit a PR.

[Philipotieno]

Hi @yashikakhurana I am outreachy applicant is is this issue still open? If yes, you can assign me

[Philipotieno]

Hi @yashikakhurana I am trying to reproduce the issue I have requested access to the image, I'd also love to have access to the attached links

[yashikakhurana]

@Philipotieno here is the image-

[Mehak-4545]

Hello @yashikakhurana , I feel that I could try my hand at resolving this issue. If this issue is open and unresolved, can it be assigned to me as well?

[Philipotieno]

You can work on the issue, @yashikakhurana should assign it since I have another issue I am working on, we can later sync and help testing and reviewing the changes

[Mehak-4545]

@Philipotieno Can you tell me how exactly you created a Nimbus experiment to see the issue? Also I'm unable to view the image without permission. I'm assuming you have already worked a bit on this issue and could guide me on this. Thanks!

[yashikakhurana]

@Mehak-4545 I have already added a screenshot here- https://github.com/mozilla/experimenter/issues/8179#issuecomment-1470772246

[Mehak-4545]

Right, thanks!

@Mehak-4545 I have already added a screenshot here- #8179 (comment)

[Philipotieno]

@Mehak-4545 if you upload an invalid image you'll see the error as displayed by on screenshot provided by @yashikakhurana

[Jemeelah1]

@yashikakhurana can i work on this

[Jemeelah1]

@yashikakhurana i need access to the image on google drive, i sent a request

[yashikakhurana]

@Jemeelah1 you don't need access- you can find image here- https://github.com/mozilla/experimenter/issues/8179#issuecomment-1470772246

[cherish2003]

@yashikakhurana it seems like @Jemeelah1 is not working on this issue can i work on this

[Jemeelah1]

@cherish2003 I am working on it

[Jemeelah1]

I don't have access to the local host, keeps saying access denied when i try to start the project @yashikakhurana Kindly assist.

[yashikakhurana]

@Jemeelah1 can you do localhost/nimbus/

[Jemeelah1]

@yashikakhurana I am still facing same issues, is there a particular package it uses and also can it be viewed on all browsers?

[yashikakhurana]

@Jemeelah1 no it doesn't use any packages, I will suggest following readme again for set up

[Jemeelah1]

@yashikakhurana I will go through it again, thank you

[cherish2003]

@Jemeelah1 are working on this issue can you let me know if not i would like to work on it

[yashikakhurana]

work done in this ticket- https://github.com/mozilla/experimenter/pull/8677

[Philipotieno]

@cherish2003 great work, I saw your PR, I had also adjusted the margin-top so as the error not to overlap the image, on full-screen it was okay but when I tried to lead it on a smaller screen the error still overlapped the image.

[data-sync-user]

➤ Shell Escalante commented:

outreach accepted and will join May 29th start day!!!! Got our first choice. Avi!!!

[data-sync-user]

➤ Ciprian Muresan commented:

I have verified that the issue is no longer reproducible on the current version of the Stage server ({"commit": "bf6c26ed772edeb967fc419e103ef265f68b3884", "source": "https://github.com/mozilla/experimenter.git%22, ( https://github.com/mozilla/experimenter.git%22,|smart-link ) "build": "https://circleci.com/gh/mozilla/experimenter/88840"} ( https://circleci.com/gh/mozilla/experimenter/88840%22%7D )). The error message now pushes the image down so that no overlap occurs.