Pin toolbar to the bottom on mobile

assets/editor/main.js

@@ -212,15 +212,28 @@
 
     // --- Dropdowns ---
 
-    // The toolbar scrolls horizontally on mobile, which makes it an overflow
-    // container that would clip its absolutely-positioned dropdown menus. Pin an
-    // open menu to the viewport under its trigger so it escapes the clip.
+    // The toolbar scrolls horizontally (so it clips its absolutely-positioned
+    // menus) and on mobile is fixed to the bottom of the viewport. Pin an open
+    // menu to the viewport so it escapes the clip, opening upward when there
+    // isn't room below it (the bottom-toolbar case).
     var toolbar = document.querySelector('.editor-toolbar');
     function pinMenu(toggle, menu) {
         if (!menu.classList.contains('is-open')) return;
         var r = toggle.getBoundingClientRect();
+        var vh = window.innerHeight;
         menu.style.position = 'fixed';
-        menu.style.top = r.bottom + 'px';
+        menu.style.overflowY = 'auto';
+        var spaceBelow = vh - r.bottom;
+        var spaceAbove = r.top;
+        if (spaceBelow < menu.offsetHeight + 8 && spaceAbove > spaceBelow) {
+            menu.style.top = 'auto';
+            menu.style.bottom = (vh - r.top) + 'px';
+            menu.style.maxHeight = (spaceAbove - 8) + 'px';
+        } else {
+            menu.style.bottom = 'auto';
+            menu.style.top = r.bottom + 'px';
+            menu.style.maxHeight = (spaceBelow - 8) + 'px';
+        }
         var left = Math.min(r.left, document.documentElement.clientWidth - menu.offsetWidth - 4);
         menu.style.left = Math.max(4, left) + 'px';
     }