fix chat resizing in RTL

bigbluebutton-html5/imports/ui/components/chat/component.jsx

@@ -53,6 +53,7 @@ const Chat = (props) => {
     syncing,
     syncedPercent,
     lastTimeWindowValuesBuild,
+    width,
   } = props;
 
   const userSentMessage = UserSentMessageCollection.findOne({ userId: Auth.userID, sent: true });
@@ -136,6 +137,7 @@ const Chat = (props) => {
           syncedPercent,
           lastTimeWindowValuesBuild,
           userSentMessage,
+          width,
         }}
       />
       <MessageFormContainer

bigbluebutton-html5/imports/ui/components/chat/time-window-list/component.jsx

@@ -7,6 +7,7 @@ import { AutoSizer,CellMeasurer, CellMeasurerCache } from 'react-virtualized';
 import Styled from './styles';
 import ChatLogger from '/imports/ui/components/chat/chat-logger/ChatLogger';
 import TimeWindowChatItem from './time-window-chat-item/container';
+import { convertRemToPixels } from '/imports/utils/dom-utils';
 
 const CHAT_CONFIG = Meteor.settings.public.chat;
 const SYSTEM_CHAT_TYPE = CHAT_CONFIG.type_system;
@@ -271,6 +272,7 @@ class TimeWindowList extends PureComponent {
   render() {
     const {
       timeWindowsValues,
+      width,
     } = this.props;
     const {
       scrollArea,
@@ -285,6 +287,8 @@ class TimeWindowList extends PureComponent {
       && !userScrolledBack
     );
 
+    const paddingValue = convertRemToPixels(2);
+
     return (
       [
         <Styled.MessageListWrapper
@@ -306,8 +310,8 @@ class TimeWindowList extends PureComponent {
           aria-live="polite"
           ref={node => this.messageListWrapper = node}
         >
-          <AutoSizer>
-            {({ height, width }) => {
+          <AutoSizer disableWidth>
+            {({ height }) => {
               if (width !== this.lastWidth) {
                 this.lastWidth = width;
                 this.cache.clearAll();
@@ -328,7 +332,7 @@ class TimeWindowList extends PureComponent {
                   rowRenderer={this.rowRender}
                   rowCount={timeWindowsValues.length}
                   height={height}
-                  width={width}
+                  width={width - paddingValue}
                   overscanRowCount={0}
                   deferredMeasurementCache={this.cache}
                   scrollToIndex={shouldAutoScroll ? scrollPosition : undefined}

bigbluebutton-html5/imports/ui/components/sidebar-content/component.jsx

@@ -134,7 +134,7 @@ const SidebarContent = (props) => {
       <ErrorBoundary
         Fallback={FallbackView}
       >
-        <ChatContainer />
+        <ChatContainer width={width}/>
       </ErrorBoundary>
       )}
       {sidebarContentPanel === PANELS.SHARED_NOTES && <NotesContainer />}

bigbluebutton-html5/imports/utils/dom-utils.js

@@ -21,7 +21,12 @@ export const unregisterTitleView = () => {
     title.text = data.join(' - ');
 };
 
+export const convertRemToPixels = (rem) => {
+    return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
+}
+
 export default {
   registerTitleView,
   unregisterTitleView,
+  convertRemToPixels,
 };