Fix iOS Safari topbar width on resize

src/lib/appManagers/appImManager.ts

@@ -188,36 +188,56 @@ export class AppImManager {
 
     // * fix topbar overflow section
 
+    const observeOptions = {
+      attributes: true,
+      childList: true,
+      subtree: true
+    };
+
+    // ! У МЕНЯ ПРОСТО СГОРЕЛО, САФАРИ КОНЧЕННЫЙ БРАУЗЕР - ЕСЛИ НЕ СКРЫВАТЬ БЛОК, ТО ПРИ ПЕРЕВОРОТЕ ЭКРАНА НА АЙФОНЕ БЛОК БУДЕТ НЕПРАВИЛЬНО ШИРИНЫ, ДАЖЕ БЕЗ ЭТОЙ ФУНКЦИИ!
     const setUtilsWidth = () => {
+      //return;
+      if(mutationRAF) window.cancelAnimationFrame(mutationRAF);
+      chatUtils.classList.add('hide');
+      mutationObserver.disconnect();
+      mutationRAF = window.requestAnimationFrame(() => {
+        
+        //mutationRAF = window.requestAnimationFrame(() => {
+          
+          //setTimeout(() => {
+            chatUtils.classList.remove('hide');
+            /* this.chatInfo.style.removeProperty('--utils-width');
+            void this.chatInfo.offsetLeft; // reflow */
             const width = /* chatUtils.scrollWidth */chatUtils.getBoundingClientRect().width;
             this.log('utils width:', width);
             this.chatInfo.style.setProperty('--utils-width', width + 'px');
+            //this.chatInfo.classList.toggle('have-utils-width', !!width);
+          //}, 0);
+          
+          mutationRAF = 0;
+
+          mutationObserver.observe(chatUtils, observeOptions);
+        //});
+      });
     };
 
+    /* window.addEventListener('resize', () => {
+      setTimeout(setUtilsWidth, 5000);
+    }); */
+
     let mutationRAF: number;
     const mutationObserver = new MutationObserver((mutationList) => {
-      if(mutationRAF) window.cancelAnimationFrame(mutationRAF);
-      //mutationRAF = window.setTimeout(() => {
-      mutationRAF = window.requestAnimationFrame(() => {
-        //mutationRAF = window.requestAnimationFrame(() => {
       setUtilsWidth();
-        //});
-      });
-      //}, 64);
     });
     
-    mutationObserver.observe(chatUtils, {
-      attributes: true,
-      childList: true,
-      subtree: true
-    });
+    mutationObserver.observe(chatUtils, observeOptions);
 
     mediaSizes.addListener('changeScreen', (from, to) => {
-      setUtilsWidth();
       
       this.chatAudio.divAndCaption.container.classList.toggle('is-floating', to == ScreenSize.mobile);
       this.pinnedMessageContainer.divAndCaption.container.classList.toggle('is-floating', to == ScreenSize.mobile 
       /* || (!this.chatAudio.divAndCaption.container.classList.contains('hide') && to == ScreenSize.medium) */);
+      setUtilsWidth();
     });
 
     // * fix topbar overflow section end

src/scss/partials/_chat.scss

@@ -100,7 +100,9 @@ $chat-helper-size: 39px;
 	.chat-info {
 		flex: 1 1 auto;
 		overflow: hidden;
+		//--utils-width: NaN;
 		
+		//&.have-utils-width {
 			max-width: calc(100% - var(--utils-width));
 
 			@include respond-to(medium-screens) {
@@ -108,6 +110,7 @@ $chat-helper-size: 39px;
 					max-width: calc(100% - var(--right-column-width) - var(--utils-width));
 				}
 			}
+		//}
 	}
 
 	.chat-utils {
@@ -115,6 +118,10 @@ $chat-helper-size: 39px;
 		align-items: center;
 		flex: 0 0 auto;
 
+		/* position: absolute;
+    right: 0px;
+    padding-right: inherit; */
+
 		@include respond-to(medium-screens) {
 			transition: transform var(--layer-transition);
 	
@@ -630,7 +637,7 @@ $chat-helper-size: 39px;
 		bottom: 0;
 		right: 0;
 		transform: translateZ(0);
-		transition: transform var(--layer-transition);
+		transition: transform var(--layer-transition) !important;
 
 		body.is-left-column-shown & {
 			transform: translate3d(26.5rem, 0, 0);