Tweak UX on mobile

Since Mobile Safari automatically resizes iframes to fit their content, we need to avoid using position:fixed. In this commit we:

- Eliminate use of position:fixed for dropdowns. They are instead displayed statically, like on desktop.
- Reposition modals when they are shown according to the parent window's scroll position.
- Tweak the toolbar's appearance and height on mobile.

extensions/embed/js/forum/src/main.js

@@ -1,4 +1,4 @@
-import { override } from 'flarum/extend';
+import { override, extend } from 'flarum/extend';
 import app from 'flarum/app';
 import Composer from 'flarum/components/Composer';
 import ModalManager from 'flarum/components/ModalManager';
@@ -35,6 +35,19 @@ app.initializers.replace('boot', () => {
     return original(post).replace('/embed', '/d');
   });
 
+  app.pageInfo = m.prop();
+
+  extend(ModalManager.prototype, 'show', function() {
+    const info = app.pageInfo();
+    this.$().css('top', Math.max(0, info.scrollTop - info.offsetTop));
+  });
+
+  window.iFrameResizer = {
+    readyCallback: function() {
+      window.parentIFrame.getPageInfo(app.pageInfo);
+    }
+  };
+
   app.pane = new Pane(document.getElementById('app'));
   app.drawer = new Drawer();
   app.composer = m.mount(document.getElementById('composer'), Composer.component());