Merge branch '450-fix-mobile-pop-over' into 'dev'

fix: popover icon and overlay in mobile device

Closes #450

See merge request keanuapp/keanuapp-weblite!187

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;
-    }   
+    }
   }
 }
 

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);
       }