Keep mobile override sheets above the keyboard

Author: =

apps/predbat/frontend.zip

@@ -955,7 +955,7 @@
     z-index: 110;
     width: auto;
     max-width: none;
-    max-height: calc(100dvh - var(--plan-mobile-keyboard-offset, 0px));
+    max-height: calc(100vh - var(--plan-mobile-keyboard-offset, 0px));
     padding: 0.8rem;
     padding-bottom: max(0.8rem, env(safe-area-inset-bottom));
     border-radius: 1rem 1rem 0 0;

frontend/src/components/PlanTable.css

@@ -1317,9 +1317,17 @@ export default function PlanTable({
     }
 
     const viewport = visualViewport as VisualViewport
+    let baselineHeight = viewport.height + viewport.offsetTop
 
     function updateKeyboardOffset() {
-      const offset = Math.max(0, window.innerHeight - viewport.height - viewport.offsetTop)
+      const visibleHeight = viewport.height + viewport.offsetTop
+
+      // Mobile browsers do not agree on whether innerHeight follows the
+      // keyboard. Comparing the current visual viewport with its unoccluded
+      // height works in both a browser tab and Home Assistant's iframe.
+      baselineHeight = Math.max(baselineHeight, visibleHeight)
+
+      const offset = Math.max(0, baselineHeight - visibleHeight)
 
       document.documentElement.style.setProperty('--plan-mobile-keyboard-offset', `${offset}px`)
     }