From 81808b3b74819f2229fecfd16f82e42e16ebef86 Mon Sep 17 00:00:00 2001
From: 10G Meow <10gmeow@gmail.com>
Date: Thu, 18 May 2023 12:46:31 +0300
Subject: [PATCH] fix: popover icon and overlay in mobile device

---
 src/assets/css/chat.scss      | 24 +++++++++++-------------
 src/components/ChatHeader.vue |  3 ++-
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index deb30e5..e58b88b 100644
--- a/src/assets/css/chat.scss
+++ b/src/assets/css/chat.scss
@@ -101,22 +101,17 @@ body {
   }
 
   .notification-alert {
-    display: inline-block;
-    background-color: $alert-bg-color;
-    width: 8px;
-    height: 8px;
-    border-radius: 4px;
-    margin-bottom: 2px;
-    position: relative;
-    overflow: visible;
+    .icon-circle {
+      color: $alert-bg-color;
+    }
     &.popup-open::after {
-      top: 20px;
+      top: 35px;
       color: #246bfd;
     }
     .missed-items-popup {
       position: absolute;
       bottom: -17px;
-      left: -20px;
+      left: -175px;
       transform: translateY(100%);
       background: #246bfd;
       border-radius: 8px;
@@ -125,8 +120,10 @@ body {
       padding: 22px 18px 23px 18px;
       z-index: 300;
       user-select: none;
+      width: 300px;
+      justify-content: space-between;
       .text {
-        white-space: nowrap;
+        white-space: break-spaces;
         font-family: "Inter", sans-serif;
         font-style: normal;
         font-weight: 500;
@@ -791,6 +788,7 @@ body {
 
 .room-name-inline {
   text-align: start;
+  min-width: 75px;
 }
 
 .room-name.no-upper {
@@ -1286,7 +1284,7 @@ body {
   .option-warning {
     background: linear-gradient(0deg, #FFF3F3, #FFF3F3), #FFFBED;
     border-radius: 8px;
-    padding: 18px;   
+    padding: 18px;
     font-family: 'Inter', sans-serif;
     font-style: normal;
     font-weight: 400;
@@ -1294,7 +1292,7 @@ body {
     line-height: 17px;
     .v-icon {
       margin-right: 16px;
-    }   
+    }
   }
 }
 
diff --git a/src/components/ChatHeader.vue b/src/components/ChatHeader.vue
index e523973..4660caa 100644
--- a/src/components/ChatHeader.vue
+++ b/src/components/ChatHeader.vue
@@ -19,6 +19,7 @@
           </div>
           <v-icon class="icon-dropdown" size="11">$vuetify.icons.ic_dropdown</v-icon>
           <div :class="{ 'notification-alert': true, 'popup-open': showMissedItemsInfo }" v-if="notifications">
+             <v-icon class="icon-circle" size="11">circle</v-icon>
               <!-- MISSED ITEMS POPUP -->
               <!-- <div class="missed-items-popup-background" v-if="showMissedItemsInfo" @click.stop="setHasShownMissedItemsHint()"></div>             -->
             <div class="missed-items-popup" v-if="showMissedItemsInfo" @click.stop="setHasShownMissedItemsHint()">
@@ -144,7 +145,7 @@ export default {
         this.$matrix.invites.length > 0;
     },
     notificationsText() {
-      const invitationCount = this.$matrix.invites.length 
+      const invitationCount = this.$matrix.invites.length
       if (invitationCount > 0) {
         return this.$tc('room.invitations', invitationCount);
       }