src/components/emoji_input/emoji_input.vue

@@ -118,10 +118,9 @@
 
   .emoji-picker-icon {
     position: absolute;
-    bottom: 0;
+    top: 0;
     right: 0;
-    height: 100%;
-    padding: 0 0.2em;
+    padding: 0.2em 0.25em;
     font-size: 1.3em;
     cursor: pointer;
     line-height: 1.2em;
@@ -131,11 +130,10 @@
     }
   }
 
-  &.-textarea {
-    .emoji-picker-icon {
-      height: auto;
-      padding: 0.2em;
-    }
+  &.-textarea .emoji-picker-icon {
+    inset: auto;
+    bottom: 0;
+    left: 0;
   }
 
   .emoji-picker-panel {
@@ -159,11 +157,16 @@
     outline: none;
   }
 
+
   &.-with-picker {
-    textarea,
     input {
       padding-right: 2.4em;
     }
+
+    textarea {
+      padding-bottom: 0;
+      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);
@@ -239,11 +236,9 @@
   .character-counter {
     position: absolute;
     bottom: 0;
-    right: 2.2em;
+    right: 0;
     padding: 0;
-    margin: 0;
-    line-height: 2.2em;
-    height: 2.2em;
+    margin: 0 0.5em;
 
     &.error {
       color: var(--cRed);