Fix iOS Safari topbar width on resize

src/lib/appManagers/appImManager.ts

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

src/scss/partials/_chat.scss

@@ -100,14 +100,17 @@ $chat-helper-size: 39px;
 	.chat-info {
 		flex: 1 1 auto;
 		overflow: hidden;
+		//--utils-width: NaN;
 		
-		max-width: calc(100% - var(--utils-width));
+		//&.have-utils-width {
+			max-width: calc(100% - var(--utils-width));
 
-		@include respond-to(medium-screens) {
+			@include respond-to(medium-screens) {
-			body.is-right-column-shown & {
+				body.is-right-column-shown & {
-				max-width: calc(100% - var(--right-column-width) - var(--utils-width));
+					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);