Fix dialog title overflow with icons

src/components/sidebarLeft/index.ts

@@ -335,6 +335,10 @@ export class AppSidebarLeft extends SidebarSlider {
         this.recentSearchLoaded = true;
       }
 
+      if(this.searchInput.value.trim()) {
+        return;
+      }
+
       this.searchGroups.recent.list.innerHTML = '';
       this.recentSearchClearBtn.style.display = this.recentSearch.length ? '' : 'none';
 

src/lib/appManagers/appDialogsManager.ts

@@ -25,6 +25,7 @@ type DialogDom = {
   avatarEl: AvatarElement,
   captionDiv: HTMLDivElement,
   titleSpan: HTMLSpanElement,
+  titleSpanContainer: HTMLSpanElement,
   statusSpan: HTMLSpanElement,
   lastTimeSpan: HTMLSpanElement,
   unreadMessagesSpan: HTMLSpanElement,
@@ -877,34 +878,31 @@ export class AppDialogsManager {
     const captionDiv = document.createElement('div');
     captionDiv.classList.add('user-caption');
 
+    const titleSpanContainer = document.createElement('span');
+    titleSpanContainer.classList.add('user-title');
+
     const titleSpan = document.createElement('span');
-    titleSpan.classList.add('user-title');
 
     if(peerID == $rootScope.myID && meAsSaved) {
       title = onlyFirstName ? 'Saved' : 'Saved Messages';
     } 
 
     titleSpan.innerHTML = title;
+    titleSpanContainer.append(titleSpan);
     //p.classList.add('')
 
     // в других случаях иконка верификации не нужна (а первый - это главные чатлисты)
     //if(!container) {
-      let peer: any;
+      const peer = appPeersManager.getPeer(peerID);
 
       // for muted icon
-      titleSpan.classList.add('tgico'); // * эта строка будет актуальна только для !container, но ладно
+      titleSpanContainer.classList.add('tgico'); // * эта строка будет актуальна только для !container, но ладно
-
-      if(peerID < 0) {
-        peer = appChatsManager.getChat(-peerID);
-      } else {
-        peer = appUsersManager.getUser(peerID);
-      }
 
       if(peer?.pFlags?.verified) {
-        titleSpan.classList.add('is-verified');
+        titleSpanContainer.classList.add('is-verified');
         const i = document.createElement('i');
         i.classList.add('verified-icon');
-        titleSpan.append(i);
+        titleSpanContainer.append(i);
       }
     //}
     
@@ -957,7 +955,7 @@ export class AppDialogsManager {
     const rightSpan = document.createElement('span');
     rightSpan.classList.add('dialog-title-details');
     rightSpan.append(statusSpan, lastTimeSpan);
-    titleP.append(titleSpan, rightSpan);
+    titleP.append(titleSpanContainer, rightSpan);
 
     const messageP = document.createElement('p');
     messageP.classList.add('dialog-subtitle');
@@ -969,6 +967,7 @@ export class AppDialogsManager {
       avatarEl,
       captionDiv,
       titleSpan,
+      titleSpanContainer,
       statusSpan,
       lastTimeSpan,
       unreadMessagesSpan,

src/scss/partials/_chatlist.scss

@@ -111,14 +111,12 @@
     &.is-muted {
       .user-title {
         &:after {
+          flex: 0 0 auto;
           content: $tgico-nosound;
           color: #a3a3a3;
           font-size: 1.125rem;
-          line-height: 27px;
-          vertical-align: middle;
           margin-left: .125rem;
-          display: inline-block;
+          display: inline;
-          height: 29px;
           animation: fade-in-opacity .2s ease forwards;
         }
       }
@@ -204,6 +202,7 @@
         font-size: .75rem;
         padding: 1px 0px 0px 0px;
         flex: 0 0 auto;
+        margin-left: .5rem;
       }
     }
     
@@ -245,13 +244,15 @@
     flex: 1 1 auto;
     //padding: 1px 3.5px 1px 9px; - DO MAKETA JS3
     padding: 1px 8.5px 1px 9px; // JS3
+
     p:last-child {
       margin-top: -3px;
     }
   }
 
   .user-title {
-    max-width: 82%;
+    display: flex;
+    align-items: center;
 
     img.emoji {
       vertical-align: top;
@@ -269,13 +270,13 @@
       margin-top: -1.5px;
     }
 
-    i.verified-icon {
+    .verified-icon {
+      flex: 0 0 auto;
       content: " ";
       background: url(assets/img/icon-verified.svg);
       display: inline-block;
       width: 20px;
       height: 20px;
-      vertical-align: text-bottom;
       margin-left: .125rem;
     }
   }