Modal has responsiveness issues when browser window is snapped to one side of your screen.

[WaelChettaoui]

UUID: 3f590bfb-6bc1-4863-97fa-ebdad828cb89
Browser: Chrome Version 100.0.4896.127
OS: Windows 11 Home Version 21H

Description: The modal that pops out when clicking on your avatar (top left under the navbar) has responsiveness issues when snapping your window to the sides of your screen. Please refer to the images attached. On the live site the issue only happens with the stats tab, however when building locally the issue also presents by overlaying your username on top of your avatar. This seems to be happening whenever the width of the screen is between 768p - 991p with any height value. Any lower, or higher than the aforementioned widths display properly.

This is how the issue shows up on the live build. Equipment, Costume, Pets and Mounts windows all display with their texts overlayed on the image. And the boxes deliniated for the also push out of the frames set for the each section.

This is how it shows up on the local build at the moment. The issues here are the same with the addition of the username health and experience also being overlayed on top of the avatar.

[WaelChettaoui]

I also have an idea that may be able to solve it if you dont mind giving me a go at it.

[CuriousMagpie]

Related issue from admin email:

Below ~992px on desktop, the save button covers the stat point allocations, I added some top margin to push it down which fixed the issue.

UUID: 2e2f3f67-92c0-43a8-b50a-d647e222b488
Browser: Chrome/100.0.4896.127
OS: Windows NT 10.0; Win64; x64

[CuriousMagpie]

@Tressley Do you have any input on these display issues?

[Tressley]

Hmm... Yeah, there's plenty of horizontal space to prevent these from happening. It looks like it's related to percentage based units being used. Definitely think these could be fixed.

[WaelChettaoui]

I'd like to try my hand at solving the issue if possible!

[CuriousMagpie]

Sure thing, @WaelChettaoui! Thanks for taking this on!

[CuriousMagpie]

Have you made any progress on this, @WaelChettaoui?

[CuriousMagpie]

Reassigning this to @scootyboots

[scootyboots]

I'll be addressing at least some of these issues in #14070