kakaroto / Beyond20

D&D Beyond Character Sheet Integration in Roll20
GNU General Public License v3.0
497 stars 145 forks source link

Set a Max Width in CSS on the Beyond20 Settings Menu #938

Closed Aeristoka closed 2 years ago

Aeristoka commented 2 years ago

On larger monitors (Ultrawide or 1440p and up 16:9), the Settings menu becomes quite unreadable (stretched far too wide): image

Vs approximately a 1080p: image

And a 720p: image

It might be a good idea to constrain it to the max width of the scaling on 720p, just to make things as readable as possible.

jjchambl commented 2 years ago

Putting a fix in for this now.

Aeristoka commented 2 years ago

Found an unintended side effect of this change: Roll on DnDBeyond with the change: image

Roll on DnDBeyond before the change (proper size): image

This needs a pretty serious revisit.

kakaroto commented 2 years ago

I've fixed it differently with 5422d3a64f520ef9c98b363a1fe7e230882efa36. The normal alertify has a max width to 500 pixels, which is why the alerts look nice, but the settings had a size that was set to 80% in code, which was overriding the max-width to become none and setting the width to a specific value. I've changed it to be 720px as size with a max of 50% width of the window (for mobile) instead of being hardcoded to 80% of width, which fixes it nicely.