Add hacky osk detection

src/components/mobile_post_status_modal/mobile_post_status_modal.js

@@ -10,19 +10,25 @@ const MobilePostStatusModal = {
       hidden: false,
       postFormOpen: false,
       scrollingDown: false,
+      inputActive: false,
       oldScrollPos: 0,
       amountScrolled: 0
     }
   },
   created () {
     window.addEventListener('scroll', this.handleScroll)
+    window.addEventListener('resize', this.handleOSK)
   },
   destroyed () {
     window.removeEventListener('scroll', this.handleScroll)
+    window.removeEventListener('resize', this.handleOSK)
   },
   computed: {
     currentUser () {
       return this.$store.state.users.currentUser
+    },
+    isHidden () {
+      return this.hidden || this.inputActive
     }
   },
   methods: {
@@ -39,6 +45,26 @@ const MobilePostStatusModal = {
       this.postFormOpen = false
       this.hidden = false
     },
+    handleOSK () {
+      // This is a big hack: we're guessing from changed window sizes if the
+      // on-screen keyboard is active or not. This is only really important
+      // for phones in portrait mode and it's more important to show the button
+      // in normal scenarios on all phones, than it is to hide it when the
+      // keyboard is active.
+      // Guesswork based on https://www.mydevice.io/#compare-devices
+
+      // for example, iphone 4 and android phones from the same time period
+      const smallPhone = window.innerWidth < 350
+      const smallPhoneKbOpen = smallPhone && window.innerHeight < 345
+
+      const biggerPhone = !smallPhone && window.innerWidth < 450
+      const biggerPhoneKbOpen = biggerPhone && window.innerHeight < 560
+      if (smallPhoneKbOpen || biggerPhoneKbOpen) {
+        this.inputActive = true
+      } else {
+        this.inputActive = false
+      }
+    },
     handleScroll: throttle(function () {
       const scrollAmount = window.scrollY - this.oldScrollPos
       const scrollingDown = scrollAmount > 0

src/components/mobile_post_status_modal/mobile_post_status_modal.vue

@@ -12,7 +12,7 @@
   </div>
   <button
     class="new-status-button"
-    :class="{ hidden }"
+    :class="{ 'hidden': isHidden }"
     @click="openPostForm"
   >
     <i class="icon-edit" />