Merge pull request #609 from Adamant-im/fix/hidden-emojies-on-chrome-ios

fix: emojis are not visible on iOS Chrome

package.json

@@ -8,6 +8,7 @@
   "scripts": {
     "serve": "vite preview --config vite-pwa.config.ts",
     "dev": "vite --config vite-pwa.config.ts",
+    "dev:localnet": "vite --host 0.0.0.0 --config vite-pwa.config.ts",
     "serve:test": "cross-env ADM_CONFIG_FILE=test vue-cli-service serve",
     "wallets:generate": "npm run wallets:data:generate && npm run wallets:types:generate",
     "wallets:data:generate": "node scripts/wallets.mjs",

src/components/Chat/Chat.vue

@@ -52,6 +52,7 @@
               v-if="showEmojiPicker"
               @emoji:select="(emoji) => onEmojiSelect(actionMessage.id, emoji)"
               elevation
+              position="absolute"
             />
 
             <AChatReactionSelect
@@ -119,6 +120,7 @@
                   v-if="showEmojiPicker"
                   @emoji:select="(emoji) => onEmojiSelect(message.id, emoji)"
                   elevation
+                  position="absolute"
                 />
 
                 <AChatReactionSelect
@@ -175,6 +177,7 @@
                   v-if="showEmojiPicker"
                   @emoji:select="(emoji) => onEmojiSelect(message.id, emoji)"
                   elevation
+                  position="absolute"
                 />
 
                 <AChatReactionSelect

src/components/Chat/ChatEmojis.vue

@@ -2,6 +2,7 @@
   <v-menu
     :model-value="open"
     :eager="true"
+    location="top"
     @update:model-value="toggleMenu"
     :close-on-content-click="false"
     transition="slide-y-reverse-transition"
@@ -10,7 +11,7 @@
       <v-icon class="chat-emojis__icon" icon="mdi-emoticon-outline" size="28" v-bind="props" />
     </template>
 
-    <emoji-picker @emoji:select="getEmoji"></emoji-picker>
+    <emoji-picker @emoji:select="getEmoji" position="absolute"></emoji-picker>
   </v-menu>
 </template>
 <script>

src/components/Chat/ChatMenu.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-menu>
+    <v-menu eager>
       <template #activator="{ props }">
         <v-icon class="chat-menu__icon" v-bind="props" icon="mdi-plus-circle-outline" size="28" />
       </template>
@@ -144,6 +144,7 @@ export default {
 .chat-menu {
   &__list {
     min-width: 200px;
+    max-height: 100vh;
 
     :deep(.v-list-item-title) {
       font-weight: 400;

src/components/EmojiPicker.vue

@@ -2,6 +2,7 @@
   <div
     :class="{
       [classes.root]: true,
+      [classes.positionAbsolute]: position === 'absolute',
       'elevation-9': elevation
     }"
   >
@@ -12,19 +13,23 @@
 <script lang="ts">
 import { useTheme } from '@/hooks/useTheme'
 import axios from 'axios'
-import { defineComponent, onMounted, ref } from 'vue'
+import { defineComponent, onMounted, PropType, ref } from 'vue'
 import { Picker } from 'emoji-mart'
 import { isMobile } from '@/lib/display-mobile'
 
 const className = 'emoji-picker'
 const classes = {
-  root: className
+  root: className,
+  positionAbsolute: `${className}--position-absolute`
 }
 
 export default defineComponent({
   props: {
     elevation: {
       type: Boolean
+    },
+    position: {
+      type: String as PropType<'absolute'>
     }
   },
   emits: ['emoji:select'],
@@ -69,6 +74,12 @@ export default defineComponent({
 .emoji-picker {
   border-radius: 8px;
 
+  &--position-absolute {
+    // Fix for Chrome on iOS. Don't touch it
+    position: absolute;
+    bottom: 0;
+  }
+
   em-emoji-picker {
     width: 264px;
     height: 264px;