refs #1316 Switch overflow style for emoji picker

src/renderer/components/TimelineSpace/Modals/NewToot.vue

@@ -5,6 +5,7 @@
     :before-close="closeConfirm"
     width="400px"
     class="new-toot-modal"
+    ref="dialog"
   >
     <el-form v-on:submit.prevent="toot" role="form">
       <div class="spoiler" v-show="showContentWarning">
@@ -19,6 +20,7 @@
         :height="statusHeight"
         @paste="onPaste"
         @toot="toot"
+        @pickerOpened="pickerOpened"
       />
     </el-form>
     <Poll
@@ -403,9 +405,19 @@ export default {
       this.pollExpire = obj
     },
     handleResize(event) {
+      const style = this.$refs.dialog.$el.firstChild.style
+      if (style.overflow === '' || style.overflow === 'hidden') {
         const pollHeight = this.$refs.poll ? this.$refs.poll.$el.offsetHeight : 0
         this.statusHeight = event.height - 63 - 54 - this.$refs.preview.offsetHeight - pollHeight
       }
+    },
+    pickerOpened(open) {
+      if (open) {
+        this.$refs.dialog.$el.firstChild.style.overflow = 'visible'
+      } else {
+        this.$refs.dialog.$el.firstChild.style.overflow = 'hidden'
+      }
+    }
   }
 }
 </script>
@@ -416,6 +428,7 @@ export default {
     background-color: #f2f6fc;
     overflow: hidden;
     resize: both;
+    padding-bottom: 20px;
   }
 
   .el-dialog__header {
@@ -509,7 +522,6 @@ export default {
     background-color: #f2f6fc;
     font-size: var(--base-font-size);
     padding-bottom: 0;
-    margin-bottom: 20px;
 
     .upload-image {
       text-align: left;

src/renderer/components/TimelineSpace/Modals/NewToot/Status.vue

@@ -251,9 +251,11 @@ export default {
     },
     toggleEmojiPicker() {
       this.openEmojiPicker = !this.openEmojiPicker
+      this.$emit('pickerOpened', this.openEmojiPicker)
     },
     hideEmojiPicker() {
       this.openEmojiPicker = false
+      this.$emit('pickerOpened', this.openEmojiPicker)
     },
     selectEmoji(emoji) {
       const current = this.$refs.status.selectionStart
@@ -341,8 +343,8 @@ export default {
 
   .emoji-picker {
     position: absolute;
-    top: 32px;
-    left: 240px;
+    top: 0;
+    right: 32px;
   }
 }
 </style>