Fix view on small screens

[EinEinfach]

There is an issue on the bottom on small screens:

The old version looks much better:

[ShadedSelf]

Hmmm, I think you might need to add something like this for IOS: body { padding-bottom: env(safe-area-inset-bottom); }

But I cant test it

[EinEinfach]

Where exactly should I add this row?

[ShadedSelf]

style.css

[ShadedSelf]

Actually, maybe something like this its probably better: #_pages_content { padding-bottom: env(safe-area-inset-bottom); }

[EinEinfach]

It doesn't work

[ShadedSelf]

Change line 61 in app.py to: 'content': 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover'

Im sure there is a way to make it work, if you are willing to take the time, google "env(safe-area-inset-bottom)" and "not working" or something like that, sadly I cant make the testing myself. If not, set this to 34pixels or so. #_pages_content { padding-bottom: 34px; }

[rothnic]

Change line 61 in app.py to: 'content': 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover'

Im sure there is a way to make it work, if you are willing to take the time, google "env(safe-area-inset-bottom)" and "not working" or something like that, sadly I cant make the testing myself. If not, set this to 34pixels or so. #_pages_content { padding-bottom: 34px; }

Yes, this is the same solution that I found as well. If you don't have the viewport-fit=cover, then the safe-area-inset-bottom doesn't work. With the viewport-fit=cover, it does apply the padding needed. Might have to find the right place to put that extra padding.

[rothnic]

[rothnic]

I'm seeing one other issue with using the "add to home screen" capability on iphone. It seems like it not being a true single page app, it might need some work to avoid this issue when navigating.

The main page is fine, but going to any of the other pages shows the toolbars. This I think would have been an existing issue though.

[EinEinfach]

No, I can't see this problem on real device. All pages work as one page app

[rothnic]

No, I can't see this problem on real device. All pages work as one page app

Ok, good. Then, yeah from my testing adding viewport-fit=cover and #_pages_content { padding-bottom: env(safe-area-inset-bottom); } as @ShadedSelf suggested, seems to work well. That style should take care of all pages when using the app in this add to home screen mode on iphone.

[EinEinfach]

Thaks for help. It looks great again!

[rothnic]

Thaks for help. It looks great again!

Glad we found the more correct solution vs adding padding to all devices.

By the way, if you decide you want a little more or less padding, you can also use the calc function to adjust that a bit. For example, something like this padding-bottom: max(0, calc(env(safe-area-inset-bottom) - 4px)) would adjust what ends up being a 34px padding to 30px without impacting other devices.

One other thing worth mentioning is that there are other safe-area variables we may need to revisit if we ever care about using a mobile device in landscape orientation, but at this point it doesn't seem super usable in that layout due to the other elements that constrain the plot too much.