move emoji icon to bottom-left for textareas

src/components/emoji_input/emoji_input.vue

@@ -2,7 +2,7 @@
   <div
     ref="root"
     class="input emoji-input"
-    :class="{ 'with-picker': !hideEmojiButton }"
+    :class="{ '-with-picker': !hideEmojiButton, '-textarea': this.input?.tagName === 'TEXTAREA' }"
   >
     <slot
       :id="'textbox-' + randomSeed"
@@ -120,7 +120,7 @@
     position: absolute;
     top: 0;
     right: 0;
-    margin: 0.2em 0.25em;
+    padding: 0.2em 0.25em;
     font-size: 1.3em;
     cursor: pointer;
     line-height: 1.2em;
@@ -130,6 +130,12 @@
     }
   }
 
+  &.-textarea .emoji-picker-icon {
+    inset: auto;
+    bottom: 0;
+    left: 0;
+  }
+
   .emoji-picker-panel {
     position: absolute;
     z-index: 20;
@@ -151,8 +157,15 @@
     outline: none;
   }
 
-  &.with-picker input {
-    padding-right: 2em;
+
+  &.-with-picker {
+    input {
+      padding-right: 2.4em;
+    }
+
+    textarea {
+      margin-bottom: 2.5em;
+    }
   }
 
   .hidden-overlay {

src/components/post_status_form/post_status_form.scss

@@ -208,14 +208,11 @@
     padding: 0;
   }
 
-  .input.form-post-body {
+  textarea.input.form-post-body {
     // TODO: make a resizable textarea component?
     box-sizing: content-box; // needed for easier computation of dynamic size
     overflow: hidden;
     transition: min-height 200ms 100ms;
-    // stock padding + 1 line of text (for counter)
-    padding-bottom: calc(var(--_padding) + var(--post-line-height) * 1em);
-    padding-right: 1.5em;
     // two lines of text
     height: calc(var(--post-line-height) * 1em);
     min-height: calc(var(--post-line-height) * 1em);