updated logic for padding with spaces, improved spam mode

src/components/emoji_picker/emoji_picker.js

@@ -27,7 +27,7 @@ const EmojiPicker = {
   methods: {
     onEmoji (emoji) {
       const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement
-      this.$emit('emoji', { insertion: ` ${value} `, spamMode: this.spamMode })
+      this.$emit('emoji', { insertion: value, spamMode: this.spamMode })
     },
     highlight (key) {
       const ref = this.$refs['group-' + key]

src/components/emoji_picker/emoji_picker.scss

@@ -15,7 +15,8 @@
     line-height: normal;
   }
   .spam-mode-label {
-    padding: 7px;
+    padding: 0 7px;
+    display: flex;
   }
 
   .heading {
@@ -104,6 +105,7 @@
       flex: 1 1 1px;
       position: relative;
       overflow: auto;
+      user-select: none;
       mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
             linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
             linear-gradient(to top, white, white);

src/components/emoji_picker/emoji_picker.vue

@@ -83,7 +83,11 @@
             v-model="spamMode"
             type="checkbox"
             >
-          <label class="spam-mode-label" :for="labelKey + 'spam-mode'">{{ $t('emoji.spam') }}</label>
+          <label class="spam-mode-label" :for="labelKey + 'spam-mode'">
+            <div class="spam-mode-label-text">
+              {{ $t('emoji.spam') }}
+            </div>
+          </label>
         </div>
       </div>
       <div