2 files changed, 35 insertions, 22 deletions
diff --git a/src/components/mobile_post_status_modal/mobile_post_status_modal.js b/src/components/mobile_post_status_modal/mobile_post_status_modal.js
index 91b730e7..3cec23c6 100644
--- a/src/components/mobile_post_status_modal/mobile_post_status_modal.js
+++ b/src/components/mobile_post_status_modal/mobile_post_status_modal.js
@@ -96,12 +96,12 @@ const MobilePostStatusModal = {
         this.hidden = false
       }
       this.oldScrollPos = window.scrollY
-    }, 100, {leading: true, trailing: false}),
+    }, 100, { leading: true, trailing: false }),
 
     handleScrollEnd: debounce(function () {
       this.hidden = false
       this.oldScrollPos = window.scrollY
-    }, 100, {leading: false, trailing: true})
+    }, 100, { leading: false, trailing: true })
   }
 }
 
diff --git a/src/components/mobile_post_status_modal/mobile_post_status_modal.vue b/src/components/mobile_post_status_modal/mobile_post_status_modal.vue
index c762705b..b6d7d3ba 100644
--- a/src/components/mobile_post_status_modal/mobile_post_status_modal.vue
+++ b/src/components/mobile_post_status_modal/mobile_post_status_modal.vue
@@ -1,23 +1,31 @@
 <template>
-<div v-if="currentUser">
-  <div
-    class="post-form-modal-view modal-view"
-    v-show="postFormOpen"
-    @click="closePostForm"
-  >
-    <div class="post-form-modal-panel panel" @click.stop="">
-      <div class="panel-heading">{{$t('post_status.new_status')}}</div>
-      <PostStatusForm class="panel-body" @posted="closePostForm" />
+  <div v-if="currentUser">
+    <div
+      v-show="postFormOpen"
+      class="post-form-modal-view modal-view"
+      @click="closePostForm"
+    >
+      <div
+        class="post-form-modal-panel panel"
+        @click.stop=""
+      >
+        <div class="panel-heading">
+          {{ $t('post_status.new_status') }}
+        </div>
+        <PostStatusForm
+          class="panel-body"
+          @posted="closePostForm"
+        />
+      </div>
     </div>
+    <button
+      class="new-status-button"
+      :class="{ 'hidden': isHidden }"
+      @click="openPostForm"
+    >
+      <i class="icon-edit" />
+    </button>
   </div>
-  <button
-    class="new-status-button"
-    :class="{ 'hidden': isHidden }"
-    @click="openPostForm"
-  >
-    <i class="icon-edit" />
-  </button>
-</div>
 </template>
 
 <script src="./mobile_post_status_modal.js"></script>
@@ -26,14 +34,19 @@
 @import '../../_variables.scss';
 
 .post-form-modal-view {
-  max-height: 100%;
-  display: block;
+  align-items: flex-start;
 }
 
 .post-form-modal-panel {
   flex-shrink: 0;
-  margin: 25% 0 4em 0;
+  margin-top: 25%;
+  margin-bottom: 2em;
   width: 100%;
+  max-width: 700px;
+
+  @media (orientation: landscape) {
+    margin-top: 8%;
+  }
 }
 
 .new-status-button {