Fix ordering of keyboard access between CW field, textarea and emoji picker

app/soapbox/features/compose/components/compose_form.js

@@ -314,10 +314,6 @@ export default class ComposeForm extends ImmutablePureComponent {
           />
         </div>
 
-        <div className='emoji-picker-wrapper'>
-          <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} />
-        </div>
-
         <AutosuggestTextarea
           ref={(isModalOpen && shouldCondense) ? null : this.setAutosuggestTextarea}
           placeholder={intl.formatMessage(messages.placeholder)}
@@ -333,6 +329,7 @@ export default class ComposeForm extends ImmutablePureComponent {
           onPaste={onPaste}
           autoFocus={shouldAutoFocus}
         >
+          <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} />
           {
             !condensed &&
             <div className='compose-form__modifiers'>

app/styles/components/compose-form.scss

@@ -62,9 +62,8 @@
 
   .emoji-picker-dropdown {
     position: absolute;
-    top: 5px;
+    top: 10px;
     right: 5px;
-    z-index: 1;
   }
 
   .compose-form__autosuggest-wrapper {
@@ -141,7 +140,6 @@
     }
   }
 
-  .emoji-picker-wrapper,
   .autosuggest-textarea__suggestions-wrapper {
     position: relative;
     height: 0;

app/styles/ui.scss

@@ -148,10 +148,6 @@
   padding: 20px;
   margin-bottom: 20px;
 
-  .emoji-picker-wrapper {
-    .emoji-picker-dropdown { top: 10px; }
-  }
-
   .compose-form {
     flex: 1 1;
     padding: 0 0 0 20px !important;