fix bubble being too wide on mobile

css/base.css

@@ -1446,10 +1446,12 @@ i.search {
 
 .chat-box .left .bubble {
   background-color: #c5e1a5;
+  margin-right: 0.5rem;
 }
 
 .chat-box .right .bubble {
   background-color: #fafafa;
+  margin-left: 1.75rem;
 }
 
 .chat-box .center .bubble {

src/widgets/chat-message.jsx

@@ -189,7 +189,7 @@ function draftyFormatter(style, data, values, key) {
         if (data) {
           attr.className = 'inline-image';
           const dim = fitImageSize(data.width, data.height,
-            Math.min(this.props.viewportWidth - REM_SIZE * 4, REM_SIZE * 34.5), REM_SIZE * 24, false) ||
+            Math.min(this.props.viewportWidth - REM_SIZE * 6.5, REM_SIZE * 34.5), REM_SIZE * 24, false) ||
             {dstWidth: BROKEN_IMAGE_SIZE, dstHeight: BROKEN_IMAGE_SIZE};
           attr.style = {
             width: dim.dstWidth + 'px',

umd/index.dev.js

@@ -7143,7 +7143,7 @@ function draftyFormatter(style, data, values, key) {
       case 'IM':
         if (data) {
           attr.className = 'inline-image';
-          const dim = (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_9__.fitImageSize)(data.width, data.height, Math.min(this.props.viewportWidth - _config_js__WEBPACK_IMPORTED_MODULE_8__.REM_SIZE * 4, _config_js__WEBPACK_IMPORTED_MODULE_8__.REM_SIZE * 34.5), _config_js__WEBPACK_IMPORTED_MODULE_8__.REM_SIZE * 24, false) || {
+          const dim = (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_9__.fitImageSize)(data.width, data.height, Math.min(this.props.viewportWidth - _config_js__WEBPACK_IMPORTED_MODULE_8__.REM_SIZE * 6.5, _config_js__WEBPACK_IMPORTED_MODULE_8__.REM_SIZE * 34.5), _config_js__WEBPACK_IMPORTED_MODULE_8__.REM_SIZE * 24, false) || {
             dstWidth: _config_js__WEBPACK_IMPORTED_MODULE_8__.BROKEN_IMAGE_SIZE,
             dstHeight: _config_js__WEBPACK_IMPORTED_MODULE_8__.BROKEN_IMAGE_SIZE
           };