Improve composer appearance/usability on mobile

On mobile:
- Move submit button to right side of toolbar
- Move first header item to toolbar
- Size textarea correctly

js/forum/src/components/CommentPost.js

@@ -71,8 +71,7 @@ export default class CommentPost extends Post {
 
   isEditing() {
     return app.composer.component instanceof EditPostComposer &&
-      app.composer.component.props.post === this.props.post &&
+      app.composer.component.props.post === this.props.post;
-      app.composer.position !== Composer.PositionEnum.MINIMIZED;
   }
 
   attrs() {

js/forum/src/components/Composer.js

@@ -66,6 +66,7 @@ class Composer extends Component {
 
   view() {
     const classes = {
+      'normal': this.position === Composer.PositionEnum.NORMAL,
       'minimized': this.position === Composer.PositionEnum.MINIMIZED,
       'fullScreen': this.position === Composer.PositionEnum.FULLSCREEN,
       'active': this.active
@@ -225,7 +226,7 @@ class Composer extends Component {
       const paddingBottom = parseInt($flexible.css('padding-bottom'), 10);
       const footerHeight = this.$('.TextEditor-controls').outerHeight(true);
 
-      $flexible.height(height - headerHeight - paddingBottom - footerHeight);
+      $flexible.height(this.$().outerHeight() - headerHeight - paddingBottom - footerHeight);
     }
   }
 

js/forum/src/components/ComposerBody.js

@@ -56,7 +56,7 @@ export default class ComposerBody extends Component {
     this.editor.props.disabled = this.loading;
 
     return (
-      <div className="ComposerBody">
+      <div className={'ComposerBody ' + (this.props.className || '')}>
         {avatar(this.props.user, {className: 'ComposerBody-avatar'})}
         <div className="ComposerBody-content">
           <ul className="ComposerBody-header">{listItems(this.headerItems().toArray())}</ul>

js/forum/src/components/DiscussionComposer.js

@@ -31,12 +31,15 @@ export default class DiscussionComposer extends ComposerBody {
     props.submitLabel = props.submitLabel || app.translator.trans('core.forum.composer_discussion.submit_button');
     props.confirmExit = props.confirmExit || extractText(app.translator.trans('core.forum.composer_discussion.discard_confirmation'));
     props.titlePlaceholder = props.titlePlaceholder || extractText(app.translator.trans('core.forum.composer_discussion.title_placeholder'));
+    props.className = 'ComposerBody--discussion';
   }
 
   headerItems() {
     const items = super.headerItems();
 
-    items.add('title', (
+    items.add('title', <h3>{app.translator.trans('core.forum.composer_discussion.title')}</h3>, 100);
+
+    items.add('discussionTitle', (
       <h3>
         <input className="FormControl"
           value={this.title()}

js/forum/src/components/TextEditor.js

@@ -72,6 +72,7 @@ export default class TextEditor extends Component {
         children: this.props.submitLabel,
         icon: 'check',
         className: 'Button Button--primary',
+        itemClassName: 'App-primaryControl',
         onclick: this.onsubmit.bind(this)
       })
     );

less/forum/Composer.less

@@ -142,6 +142,9 @@
       }
     }
   }
+  .Composer-controls .fa-minus:before {
+    content: @fa-var-times;
+  }
   .composer-backdrop {
     position: fixed;
     top: 0;
@@ -172,6 +175,17 @@
         border-bottom: 0;
         padding: 15px;
       }
+
+      .normal &:first-child {
+        margin: -@header-height-phone 50px 0;
+        text-align: center;
+        position: relative;
+        z-index: @zindex-header + 1;
+        border: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
     h3 {
       &, a, input {
@@ -184,10 +198,9 @@
   }
   .ComposerBody-editor {
     padding: 15px;
-
+  }
-    textarea {
+  .ComposerBody-editor .TextEditor-controls .item-submit {
-      height: 50vh !important;
+    position: absolute !important;
-    }
   }
 }
 
@@ -284,6 +297,9 @@
       font-size: 16px;
     }
   }
+  .ComposerBody--discussion .ComposerBody-header .item-title {
+    display: none;
+  }
 }
 
 @media @desktop-up {