Responsive fixes

- Make composer absolutely positioned on mobile to work around iOS 8/9
bug
- Make search results dropdown appear on mobile

closes flarum/core#137

framework/core/js/forum/src/components/Composer.js

@@ -260,6 +260,14 @@ class Composer extends Component {
           $composer.show()
             .css({height: oldHeight})
             .animate({bottom: 0, height: newHeight}, 'fast', this.component.focus.bind(this.component));
+
+          if ($composer.css('position') === 'absolute') {
+            $composer.css('top', $(window).scrollTop());
+
+            this.$backdrop = $('<div/>')
+              .addClass('composer-backdrop')
+              .appendTo('body');
+          }
         } else {
           this.component.focus();
         }
@@ -268,20 +276,24 @@ class Composer extends Component {
       case Composer.PositionEnum.MINIMIZED:
         // If the composer has been minimized, we will animate it shrinking down
         // to its new smaller size.
-        $composer.css({height: oldHeight})
+        $composer.css({top: 'auto', height: oldHeight})
           .animate({height: newHeight}, 'fast');
+
+        if (this.$backdrop) this.$backdrop.remove();
         break;
 
       case Composer.PositionEnum.HIDDEN:
         // If the composer has been hidden, then we will animate it sliding down
         // beyond the edge of the viewport. Once the animation is complete, we
         // un-draw the composer's component.
-        $composer.css({height: oldHeight})
+        $composer.css({top: 'auto', height: oldHeight})
           .animate({bottom: -newHeight}, 'fast', () => {
             $composer.hide();
             this.clear();
             m.redraw();
           });
+
+        if (this.$backdrop) this.$backdrop.remove();
         break;
 
       case Composer.PositionEnum.FULLSCREEN:

framework/core/js/forum/src/components/Search.js

@@ -75,7 +75,7 @@ export default class Search extends Component {
     }
 
     return (
-      <div className={'Search Dropdown ' + classList({
+      <div className={'Search ' + classList({
         open: this.value() && this.hasFocus,
         active: !!currentSearch,
         loading: !!this.loadingSources

framework/core/less/forum/Composer.less

@@ -113,6 +113,7 @@
     background: @body-bg;
 
     &:not(.minimized) {
+      position: absolute;
       top: 0;
       height: 100vh !important;
       padding-top: @header-height-phone;
@@ -120,6 +121,7 @@
       &:before {
         content: " ";
         .header-background();
+        position: absolute;
         opacity: 0;
 
         .visible& {
@@ -128,14 +130,28 @@
       }
 
       & .Composer-controls {
+        position: static;
         z-index: @zindex-header + 1;
 
         li:not(.App-backControl) {
           display: none;
         }
+        .App-backControl {
+          position: absolute !important;
         }
       }
     }
+  }
+  .composer-backdrop {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: @zindex-composer - 1;
+    background-color: @overlay-bg;
+    opacity: 0.9;
+  }
   .ComposerBody-content {
     .minimized & {
       margin-right: 50px;

framework/core/less/lib/Search.less

@@ -1,3 +1,6 @@
+.Search {
+  position: relative;
+}
 @media @tablet-up {
   .Search {
     input:focus, &.active input, .Search-results {
@@ -11,6 +14,10 @@
   left: auto;
   right: 0;
 
+  @media @phone {
+    left: 0;
+  }
+
   > li > a {
     white-space: normal;
   }