[FIX] html_editor: toolbar positioning for mobile

Before this commit:

When the keyboard opens on mobile, the toolbar appears in the wrong position,
leaving a space between the toolbar and the keyboard.

After this commit:

Now, when the keyboard opens on mobile, the toolbar will correctly stick to the
top of the keyboard.

task:4196686

closes odoo#181737

Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>

addons/html_editor/static/src/main/toolbar/mobile_toolbar.js

@@ -11,6 +11,7 @@ export class ToolbarMobile extends Component {
     setup() {
         this.toolbar = useRef("toolbarWrapper");
         useExternalListener(window.visualViewport, "resize", this.fixToolbarPosition);
+        useExternalListener(window.visualViewport, "scroll", this.fixToolbarPosition);
         onMounted(() => {
             this.fixToolbarPosition();
         });
@@ -20,7 +21,8 @@ export class ToolbarMobile extends Component {
      * Fixes the position of the toolbar for the keyboard height.
      */
     fixToolbarPosition() {
-        const keyboardHeight = window.innerHeight - window.visualViewport.height;
+        const keyboardHeight =
+            window.innerHeight - (window.visualViewport.height + window.visualViewport.offsetTop);
         if (keyboardHeight > 0) {
             this.toolbar.el.style.bottom = `${keyboardHeight}px`;
         } else {