diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index df56bf338..ae48139a3 100644 --- a/src/components/emoji_picker/emoji_picker.js +++ b/src/components/emoji_picker/emoji_picker.js @@ -135,9 +135,6 @@ const EmojiPicker = { Popover }, methods: { - groupScroll (e) { - e.currentTarget.scrollLeft += e.deltaY + e.deltaX - }, updateEmojiSize () { const css = window.getComputedStyle(this.$refs.popover.$el) const emojiSize = css.getPropertyValue('--emojiSize') diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index 45290a89b..12c09388f 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -166,6 +166,24 @@ } } + &-group { + display: flex; + align-items: center; + flex-wrap: wrap; + justify-content: left; + + &-title { + font-size: 0.85em; + width: 100%; + margin: 0; + padding-left: 0.3em; + + &.disabled { + display: none; + } + } + } + &-item { width: var(--emoji-size); height: var(--emoji-size); @@ -188,38 +206,9 @@ } .emoji-picker-emoji.-unicode { - font-size: calc(var(--emoji-size) * 0.8); + font-size: 1.6em; overflow: hidden; } } - - &-group { - display: grid; - grid-template-columns: repeat(var(--__amount), 1fr); - justify-items: center; - align-items: center; - justify-content: left; - grid-template-rows: repeat(1, auto); - - &.first-row { - grid-template-rows: repeat(2, auto); - - .emoji-item { - grid-row: 2; - } - } - - &-title { - font-size: 0.85em; - grid-column: span var(--__amount); - width: 100%; - margin: 0; - padding-left: 0.3em; - - &.disabled { - display: none; - } - } - } } } diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue index bd94bf995..a3dc8f9ee 100644 --- a/src/components/emoji_picker/emoji_picker.vue +++ b/src/components/emoji_picker/emoji_picker.vue @@ -8,9 +8,7 @@ @close="onPopoverClosed" >