diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue index b362db32f..dcf217abd 100644 --- a/src/components/emoji_input/emoji_input.vue +++ b/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 { diff --git a/src/components/post_status_form/post_status_form.scss b/src/components/post_status_form/post_status_form.scss index da8334d7c..077548d25 100644 --- a/src/components/post_status_form/post_status_form.scss +++ b/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);