From 2803b40092313e8ba64d5c795ac80501a803e4df Mon Sep 17 00:00:00 2001
From: Eduard Kuzmenko <thanwords24@gmail.com>
Date: Mon, 23 Nov 2020 13:20:26 +0200
Subject: [PATCH] Fix iOS Safari topbar width on resize

---
 src/lib/appManagers/appImManager.ts | 54 ++++++++++++++++++++---------
 src/scss/partials/_chat.scss        | 21 +++++++----
 2 files changed, 51 insertions(+), 24 deletions(-)

diff --git a/src/lib/appManagers/appImManager.ts b/src/lib/appManagers/appImManager.ts
index 50df2bfb..ff859828 100644
--- a/src/lib/appManagers/appImManager.ts
+++ b/src/lib/appManagers/appImManager.ts
@@ -188,36 +188,56 @@ export class AppImManager {
 
     // * fix topbar overflow section
 
-    const setUtilsWidth = () => {
-      const width = /* chatUtils.scrollWidth */chatUtils.getBoundingClientRect().width;
-      this.log('utils width:', width);
-      this.chatInfo.style.setProperty('--utils-width', width + 'px');
+    const observeOptions = {
+      attributes: true,
+      childList: true,
+      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);
+    };
+
+    /* window.addEventListener('resize', () => {
+      setTimeout(setUtilsWidth, 5000);
+    }); */
+
+    let mutationRAF: number;
+    const mutationObserver = new MutationObserver((mutationList) => {
+      setUtilsWidth();
     });
     
-    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) */);
+      /* || (!this.chatAudio.divAndCaption.container.classList.contains('hide') && to == ScreenSize.medium) */);
+      setUtilsWidth();
     });
 
     // * fix topbar overflow section end
diff --git a/src/scss/partials/_chat.scss b/src/scss/partials/_chat.scss
index 4888217f..e663e6c1 100644
--- a/src/scss/partials/_chat.scss
+++ b/src/scss/partials/_chat.scss
@@ -100,14 +100,17 @@ $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));
 
-		max-width: calc(100% - var(--utils-width));
-
-		@include respond-to(medium-screens) {
-			body.is-right-column-shown & {
-				max-width: calc(100% - var(--right-column-width) - var(--utils-width));
+			@include respond-to(medium-screens) {
+				body.is-right-column-shown & {
+					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);