diff --git a/pkg/interface/src/apps/chat/components/chat.js b/pkg/interface/src/apps/chat/components/chat.js index e43ae6b0c8..817f9265cf 100644 --- a/pkg/interface/src/apps/chat/components/chat.js +++ b/pkg/interface/src/apps/chat/components/chat.js @@ -22,6 +22,7 @@ function getNumPending(props) { const ACTIVITY_TIMEOUT = 60000; // a minute const DEFAULT_BACKLOG_SIZE = 300; +const MAX_BACKLOG_SIZE = 1000; function scrollIsAtTop(container) { if ((navigator.userAgent.includes("Safari") && @@ -136,14 +137,15 @@ export class ChatScreen extends Component { const unread = props.length - props.read; const unreadUnloaded = unread - props.envelopes.length; + const excessUnread = unreadUnloaded > MAX_BACKLOG_SIZE; - if(unreadUnloaded + 20 > DEFAULT_BACKLOG_SIZE) { + if(!excessUnread && unreadUnloaded + 20 > DEFAULT_BACKLOG_SIZE) { this.askForMessages(unreadUnloaded + 20); } else { this.askForMessages(DEFAULT_BACKLOG_SIZE); } - if(props.read === props.length){ + if(excessUnread || props.read === props.length){ this.scrolledToMarker = true; this.setState( { diff --git a/pkg/interface/src/apps/chat/components/lib/message.js b/pkg/interface/src/apps/chat/components/lib/message.js index 3c71544f43..ce1d4bd89d 100644 --- a/pkg/interface/src/apps/chat/components/lib/message.js +++ b/pkg/interface/src/apps/chat/components/lib/message.js @@ -87,8 +87,8 @@ export class Message extends Component { className="o-80-d" src={letter.url} style={{ - width: '50%', - maxWidth: '250px' + height: 'min(250px, 20vh)', + maxWidth: '80vw' }} > ); @@ -154,7 +154,7 @@ export class Message extends Component { ); } else { return ( -
+
diff --git a/pkg/interface/src/apps/chat/css/custom.css b/pkg/interface/src/apps/chat/css/custom.css index 352981d4f2..b2a73dbecd 100644 --- a/pkg/interface/src/apps/chat/css/custom.css +++ b/pkg/interface/src/apps/chat/css/custom.css @@ -60,6 +60,10 @@ h2 { line-height: 16px; } +.chat-md-message > pre { + overflow-x: auto; +} + .mono { font-family: "Source Code Pro", monospace; }