From cde98be9e2eecffdac22a64fa1c84ff61a7308f3 Mon Sep 17 00:00:00 2001
From: Mikhail <realgoodprogrammer@gmail.com>
Date: Sat, 16 Mar 2024 21:05:01 +0300
Subject: [PATCH 1/5] fix: emojis are not visible on iOS Chrome

---
 package.json                       | 2 +-
 src/components/Chat/ChatEmojis.vue | 1 +
 src/components/EmojiPicker.vue     | 2 ++
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 724ab8fa5..dbe2a6a20 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
   "private": true,
   "scripts": {
     "serve": "vite preview --config vite-pwa.config.ts",
-    "dev": "vite --config vite-pwa.config.ts",
+    "dev": "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",
diff --git a/src/components/Chat/ChatEmojis.vue b/src/components/Chat/ChatEmojis.vue
index 98d2e480e..d0b110175 100644
--- a/src/components/Chat/ChatEmojis.vue
+++ b/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"
diff --git a/src/components/EmojiPicker.vue b/src/components/EmojiPicker.vue
index 41fbbc351..f4ba00027 100644
--- a/src/components/EmojiPicker.vue
+++ b/src/components/EmojiPicker.vue
@@ -68,6 +68,8 @@ export default defineComponent({
 
 .emoji-picker {
   border-radius: 8px;
+  position: absolute;
+  bottom: 0;
 
   em-emoji-picker {
     width: 264px;

From ebd91a7371e52a730d7b8075c6d71482fe110102 Mon Sep 17 00:00:00 2001
From: Mikhail <realgoodprogrammer@gmail.com>
Date: Sat, 16 Mar 2024 22:02:07 +0300
Subject: [PATCH 2/5] fix: blinking scrollbar on Chrome

---
 src/components/Chat/ChatMenu.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Chat/ChatMenu.vue b/src/components/Chat/ChatMenu.vue
index a91e4ec40..3e8453074 100644
--- a/src/components/Chat/ChatMenu.vue
+++ b/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>

From a2e2c081584f6668da2eca191cf0fae9deb14aa1 Mon Sep 17 00:00:00 2001
From: Mikhail <realgoodprogrammer@gmail.com>
Date: Sun, 17 Mar 2024 13:53:17 +0300
Subject: [PATCH 3/5] fix: another blinking scrollbar on Chrome

---
 src/components/Chat/ChatMenu.vue | 1 +
 src/components/EmojiPicker.vue   | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/components/Chat/ChatMenu.vue b/src/components/Chat/ChatMenu.vue
index 3e8453074..3b6f575c7 100644
--- a/src/components/Chat/ChatMenu.vue
+++ b/src/components/Chat/ChatMenu.vue
@@ -144,6 +144,7 @@ export default {
 .chat-menu {
   &__list {
     min-width: 200px;
+    max-height: 100vh;
 
     :deep(.v-list-item-title) {
       font-weight: 400;
diff --git a/src/components/EmojiPicker.vue b/src/components/EmojiPicker.vue
index f4ba00027..e58d68172 100644
--- a/src/components/EmojiPicker.vue
+++ b/src/components/EmojiPicker.vue
@@ -66,6 +66,7 @@ export default defineComponent({
 <style lang="scss">
 @import 'vuetify/settings';
 
+//Fix for Chrome on iOS. Don't touch it
 .emoji-picker {
   border-radius: 8px;
   position: absolute;

From 8f7ed9af17e3bf759b97dc69511baa8d5baf16cd Mon Sep 17 00:00:00 2001
From: bludnic <victorcpla@gmail.com>
Date: Sun, 17 Mar 2024 11:00:54 +0000
Subject: [PATCH 4/5] feat(EmojiPicker): control the "position" from outside
 the component

---
 src/components/Chat/Chat.vue       |  3 +++
 src/components/Chat/ChatEmojis.vue |  2 +-
 src/components/EmojiPicker.vue     | 18 +++++++++++++-----
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/components/Chat/Chat.vue b/src/components/Chat/Chat.vue
index b6823909d..da6d0324c 100644
--- a/src/components/Chat/Chat.vue
+++ b/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
diff --git a/src/components/Chat/ChatEmojis.vue b/src/components/Chat/ChatEmojis.vue
index d0b110175..fee1e5142 100644
--- a/src/components/Chat/ChatEmojis.vue
+++ b/src/components/Chat/ChatEmojis.vue
@@ -11,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>
diff --git a/src/components/EmojiPicker.vue b/src/components/EmojiPicker.vue
index e58d68172..f9cae13ed 100644
--- a/src/components/EmojiPicker.vue
+++ b/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'],
@@ -66,11 +71,14 @@ export default defineComponent({
 <style lang="scss">
 @import 'vuetify/settings';
 
-//Fix for Chrome on iOS. Don't touch it
 .emoji-picker {
   border-radius: 8px;
-  position: absolute;
-  bottom: 0;
+
+  &--position-absolute {
+    // Fix for Chrome on iOS. Don't touch it
+    position: absolute;
+    bottom: 0;
+  }
 
   em-emoji-picker {
     width: 264px;

From e2bc9838f5cfd0adac8fb872b0d41a0d9d96ead2 Mon Sep 17 00:00:00 2001
From: Mikhail <realgoodprogrammer@gmail.com>
Date: Sun, 17 Mar 2024 14:14:46 +0300
Subject: [PATCH 5/5] chore: a separate script for running the application on
 the local network

---
 package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index dbe2a6a20..e874dfa85 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,8 @@
   "private": true,
   "scripts": {
     "serve": "vite preview --config vite-pwa.config.ts",
-    "dev": "vite --host 0.0.0.0 --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",