Battle screen on low-height monitors

[NightfallAlicorn]

Battle messages misbehave scrolling, sprites stop showing and maybe handy adding a vertical scroll bar for those with low height screens to reach buttons.

http://i.imgur.com/2e9vayA.jpg I can get everything to appear by full screen on Firefox with 90% zoom. But apart from those mentioned in the issue title everything seems brilliant.

Here's the full console logs of the battle. I think using browser zoom broke most stuff. http://pastebin.com/raw.php?i=8bbvLpnL

Edit: Forgot to mention. My screen resolution is 1024x600, the maximum I can get. With font size extra large fonts, to so I can read stuff better.

[coyotte508]

Can you remove the css errors from your inspector and try again?

Also does the battle continue even though sprites don't show?

[NightfallAlicorn]

http://pastebin.com/raw.php?i=aqw3uTGK Got no errors I think. May had been paralyse or something.

[Eric-Jackson]

I think doing a check between the user screen height against the page contents of the screen, then applying a scroll if it overflows would be a good solution to this. It would work on mobile as well. Something like:

if (window.screen.availHeight < battleContainerHeight + headerHeight) { battleContainer.css('overflow-y', 'scroll') }

There's probably a better solution but that should be the general idea. Not sure about the sprites not showing though.

[coyotte508]

CSS3 supports css per screen-height/width, it's already used a few times in our css.

Edit: The battle window already has some considerations like showing all pokemon buttons in one row if height is too bad. With other design changes such as the navbar which gives reduced space below and new pixel considerations, it might be wise to postpone this issue until the rest of the layout is settled.