From d21860487be8d7185e60917cd436182daae2c6b3 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Mon, 16 Jan 2023 11:21:38 +0100
Subject: [PATCH] chore: reduce emoji picker size

---
 components/search/SearchEmojiInfo.vue | 15 ++++-----------
 components/tiptap/TiptapEmojiList.vue |  9 +++++++--
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/components/search/SearchEmojiInfo.vue b/components/search/SearchEmojiInfo.vue
index 82aa5807..c7a5ee56 100644
--- a/components/search/SearchEmojiInfo.vue
+++ b/components/search/SearchEmojiInfo.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { Emoji } from 'emoji-mart'
-
 export interface SearchEmoji {
   title: string
   src: string
@@ -12,18 +10,13 @@ defineProps<{
 </script>
 
 <template>
-  <div flex gap-2 items-center>
+  <div flex="~ gap3" items-center text-base>
     <img
-      :key="emoji.title"
-      width="30"
-      height="30"
+      width="20"
+      height="20"
       :src="emoji.src"
       loading="lazy"
     >
-    <div flex="~ col gap1" pt-1 pl-2 shrink h-full overflow-hidden leading-none>
-      <div flex="~" gap-2>
-        <span text-lg>:{{ emoji.title }}:</span>
-      </div>
-    </div>
+    <span shrink overflow-hidden leading-none text-base><span text-secondary>:</span>{{ emoji.title }}<span text-secondary>:</span></span>
   </div>
 </template>
diff --git a/components/tiptap/TiptapEmojiList.vue b/components/tiptap/TiptapEmojiList.vue
index 56fdb320..cd58eee4 100644
--- a/components/tiptap/TiptapEmojiList.vue
+++ b/components/tiptap/TiptapEmojiList.vue
@@ -3,7 +3,7 @@ import { getEmojiMatchesInText } from '@iconify/utils/lib/emoji/replace/find'
 import CommonScrollIntoView from '../common/CommonScrollIntoView.vue'
 import type { CustomEmoji, Emoji } from '~~/composables/tiptap/suggestion'
 import { isCustomEmoji } from '~~/composables/tiptap/suggestion'
-import { emojiFilename, emojiPrefix, emojiRegEx, getEmojiAttributes } from '~~/config/emojis'
+import { emojiFilename, emojiPrefix, emojiRegEx } from '~~/config/emojis'
 
 const { items, command } = defineProps<{
   items: (CustomEmoji | Emoji)[]
@@ -68,7 +68,12 @@ defineExpose({
 </script>
 
 <template>
-  <div v-if="isPending || items.length" relative bg-base text-base shadow border="~ base rounded" text-sm py-2 overflow-x-hidden overflow-y-auto max-h-100>
+  <div
+    v-if="isPending || items.length"
+    relative bg-base text-base shadow border="~ base rounded"
+    text-sm py-2 overflow-x-hidden overflow-y-auto max-h-100
+    min-w-40 max-w-50
+  >
     <template v-if="isPending">
       <div flex gap-1 items-center p2 animate-pulse>
         <div i-ri:loader-2-line animate-spin />