fix: correctly account for custom vertical padding with the VK

arnog · Jul 26, 2023 · 3002aa8 · 3002aa8
1 parent 06705cf
commit 3002aa8
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/css/virtual-keyboard.less b/css/virtual-keyboard.less
@@ -126,7 +126,7 @@
 body > .ML__keyboard {
   position: fixed;
   --_padding-bottom: calc(
-    var(--_padding-bottom) + env(safe-area-inset-bottom, 0)
+    var(--keyboard-padding-bottom, 0px) + env(safe-area-inset-bottom, 0)
   );
 }
 
@@ -270,7 +270,7 @@ body > .ML__keyboard.is-visible.animate > .MLK__backdrop {
 // It contains all the operable UI (toolbar, rows of keycaps)
 .MLK__plate {
   position: absolute;
-  top: 0;
+  top: var(--_padding-top);
   left: var(--_padding-horizontal);
   width: calc(100% - 2 * var(--_padding-horizontal));
   margin: 0;

diff --git a/src/virtual-keyboard/virtual-keyboard.ts b/src/virtual-keyboard/virtual-keyboard.ts
@@ -374,7 +374,7 @@ export class VirtualKeyboard implements VirtualKeyboardInterface, EventTarget {
     if (this.container === document.body) {
       this._element?.style.setProperty(
         '--_keyboard-height',
-        `calc(${h}px + env(safe-area-inset-bottom, 0))`
+        `calc(${h}px + var(--_padding-top) + var(--_padding-bottom) + env(safe-area-inset-bottom, 0))`
       );
       const keyboardHeight = h - 1;
       this.container!.style.paddingBottom = this.originalContainerBottomPadding