fix: toolbar off-screen on iPad Safari with tabs

[arnlaugsson]

Summary

• On iPad Safari with the tab bar visible, 100vh extends behind the browser chrome, pushing the fixed-position toolbar out of view
• Adds viewport-fit=cover to viewport meta tag for proper safe area inset support
• Uses 100dvh (dynamic viewport height) with 100vh fallback for body and .app
• Sets --app-height CSS variable from visualViewport.height via JS in MobileDetection
• Offsets the fixed toolbar on iOS Safari using the delta between layout and visual viewport

Test plan

• Open Codeman on iPad Safari with tab bar visible — toolbar should be fully visible
• Verify toolbar remains visible when switching tabs in Safari
• Verify keyboard handling still works (toolbar moves above keyboard)
• Verify desktop browser layout is unaffected
• Verify iPhone Safari layout is unaffected

Proofs

[Ark0N]

thanks for the input, I will check tomorrow in detail :-)

[arnlaugsson]

I will put this into a draft PR, as I haven't been able to test this thoroughly on other devices. Will do tonight!

[Ark0N]

I did some tests on my iPad Mini, it still looks like the same as in your screenshots, so lets see how to fix it

[Ark0N]

Thanks for the contribution! The core viewport fix is solid — merged the 100dvh progressive enhancement, viewport-fit=cover, and the visualViewport-based --app-height CSS variable approach.

I made one adjustment: scoped the .ios-device.safari-browser .toolbar { bottom: calc(...) } rule to @media (max-width: 430px) where the toolbar is position: fixed. On iPad (768px) the toolbar is position: relative in the flow, so the body/app height fix alone handles it correctly — the global bottom offset was double-correcting and creating a gap.

Some minor styling details (keyboard accessory bar appearance on tablet, etc.) will be addressed in upcoming mobile optimization work. 👍