diff --git a/bigbluebutton-html5/imports/ui/components/app/component.jsx b/bigbluebutton-html5/imports/ui/components/app/component.jsx
index b910edf0f61111a65175579b5453d0b6e33f981a..7e0d60539939799c7df1ddcdaf203c10d1587fa7 100755
--- a/bigbluebutton-html5/imports/ui/components/app/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/app/component.jsx
@@ -223,12 +223,9 @@ class App extends Component {
     const { chat } = this.props;
 
     // Variables for resizing chat.
-    const CHAT_MIN_WIDTH_PX = 180;
-    const CHAT_MAX_WIDTH_PX = 600;
-    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;
 
@@ -246,8 +243,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}