fix: popover icon and overlay in mobile device

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