emoji ios styling for list

resources/js/components/FilesView/FolderIcon.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <Emoji v-if="folderEmoji" :emoji="folderEmoji"/>
-        <FontAwesomeIcon v-if="!folderEmoji" :class="{ 'is-deleted': isDeleted }" class="folder-icon" icon="folder" :style="{fill: `${folderColor}`}"/>
+        <FontAwesomeIcon v-if="!folderEmoji" :class="{ 'is-deleted': isDeleted }" class="folder-icon" icon="folder" :style="{fill: folderColor}"/>
     </div>
 </template>
 

resources/js/components/Others/Emoji.vue

@@ -1,13 +1,13 @@
 <template>
     <div>
-        <div v-if="transferEmoji && !isApple"  v-html="transferEmoji"/>
+        <span v-if="transferEmoji && !isApple" class="twemoji-emoji" v-html="transferEmoji"></span>
         <span v-if="transferEmoji && isApple" class="apple-emoji">{{ transferEmoji }}</span>
     </div>
-    
 </template>
 
 <script>
 import twemoji from 'twemoji'
+
 export default {
     name: 'Emoji',
     props: ['emoji'],
@@ -19,21 +19,18 @@ export default {
                 folder: 'svg',
                 ext: '.svg',
                 attributes: () => ({
-                            loading: 'lazy',
+                    loading: 'lazy'
                 })
             })
 
             // Check the OS, if is OS not iOS return transfered emoji to twemoji
             return !this.isApple ? tweomjiParse : this.emoji.char
-        },
+        }
     },
     data() {
         return {
-            isApple: false
+            isApple: this.$isApple()
         }
-    },
-    created () {
-        this.isApple = this.$isApple()
     }
 }
 </script>
@@ -42,6 +39,10 @@ export default {
 @import "@assets/vue-file-manager/_inapp-forms.scss";
 @import '@assets/vue-file-manager/_forms';
 
+.apple-emoji {
+    font-size: 49px;
+    line-height: 1.2;
+}
 
 </style>