Fixes #572 - Body styles getting overridden (#660)

* Fixes #572 - Body styles getting overriden * Fix build
RocketChat · Nov 19, 2021 · 66c7a13 · 66c7a13
1 parent b65502e
commit 66c7a13
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -42,3 +42,10 @@ body {
 
 	height: 100%;
 }
+
+.rc-livechat-mobile-full-screen {
+	overflow: hidden;
+
+	width: 100%;
+	height: 100%;
+}
diff --git a/src/widget.js b/src/widget.js
@@ -11,7 +11,6 @@ const WIDGET_OPEN_HEIGHT = 525;
 const WIDGET_MINIMIZED_WIDTH = 54;
 const WIDGET_MINIMIZED_HEIGHT = 54;
 const WIDGET_MARGIN = 16;
-const FULLSCREEN_DOCUMENT_CONFIG = 'overflow: hidden; height: 100%; width: 100%;';
 
 
 window.RocketChat = window.RocketChat || { _: [] };
@@ -21,7 +20,6 @@ let iframe;
 let hookQueue = [];
 let ready = false;
 let smallScreen = false;
-let bodyStyle;
 let scrollPosition;
 let widget_height;
 
@@ -74,10 +72,9 @@ function callHook(action, params) {
 const updateWidgetStyle = (isOpened) => {
 	if (smallScreen && isOpened) {
 		scrollPosition = document.documentElement.scrollTop;
-		bodyStyle = document.body.style.cssText;
-		document.body.style.cssText += FULLSCREEN_DOCUMENT_CONFIG;
+		document.body.classList.add('rc-livechat-mobile-full-screen');
 	} else {
-		document.body.style.cssText = bodyStyle;
+		document.body.classList.remove('rc-livechat-mobile-full-screen');
 		if (smallScreen) {
 			document.documentElement.scrollTop = scrollPosition;
 		}
@@ -235,11 +232,11 @@ const api = {
 	},
 
 	resetDocumentStyle() {
-		document.body.style.cssText = bodyStyle;
+		document.body.classList.remove('rc-livechat-mobile-full-screen');
 	},
 
 	setFullScreenDocumentMobile() {
-		document.body.style.cssText += smallScreen && FULLSCREEN_DOCUMENT_CONFIG;
+		smallScreen && document.body.classList.add('rc-livechat-mobile-full-screen');
 	},
 };