diff --git a/bigbluebutton-html5/imports/ui/components/app/component.jsx b/bigbluebutton-html5/imports/ui/components/app/component.jsx
index d317789f84d750057cdab5436f3ddce2b5c5fe16..b749eef671eae03711d11dc46e2ddb75bc0125a0 100755
--- a/bigbluebutton-html5/imports/ui/components/app/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/app/component.jsx
@@ -227,12 +227,9 @@ class App extends Component {
     const { chat } = this.props;
 
     // Variables for resizing chat.
-    const CHAT_MIN_WIDTH_PX = 180;
-    const CHAT_MAX_WIDTH_PX = 310;
-    const CHAT_DEFAULT_WIDTH_RELATIVE = 25;
-
-    // decide whether using pixel or percentage unit as a default width for chat
-    const CHAT_DEFAULT_WIDTH = (window.innerWidth * (CHAT_DEFAULT_WIDTH_RELATIVE / 100.0)) < CHAT_MAX_WIDTH_PX ? `${CHAT_DEFAULT_WIDTH_RELATIVE}%` : CHAT_MAX_WIDTH_PX;
+    const CHAT_MIN_WIDTH = '10%';
+    const CHAT_MAX_WIDTH = '25%';
+    const CHAT_DEFAULT_WIDTH = '15%';
 
     if (!chat) return null;
 
@@ -250,8 +247,8 @@ class App extends Component {
     return (
       <Resizable
         defaultSize={{ width: CHAT_DEFAULT_WIDTH }}
-        minWidth={CHAT_MIN_WIDTH_PX}
-        maxWidth={CHAT_MAX_WIDTH_PX}
+        minWidth={CHAT_MIN_WIDTH}
+        maxWidth={CHAT_MAX_WIDTH}
         ref={(node) => { this.resizableChat = node; }}
         className={styles.resizableChat}
         enable={resizableEnableOptions}