From a2970ce92947d75466579864b436f81356e17f3c Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Wed, 17 Jun 2020 15:24:22 +1000
Subject: [PATCH 1/3] chat: cap maximum backlog size at 1000

Caps maximum unread backlog that chat will fetch at 1000 messages.
---
 pkg/interface/src/apps/chat/components/chat.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

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(
         {

From 77731f6ca073c6cf5e2fef45d5fcfd07c7909b70 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Wed, 17 Jun 2020 16:08:32 +1000
Subject: [PATCH 2/3] chat: scroll on code overflow

Adds a scroll container if code is posted and the code will overflow the
width of the page.

Fixes #2829
---
 pkg/interface/src/apps/chat/components/lib/message.js | 2 +-
 pkg/interface/src/apps/chat/css/custom.css            | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/pkg/interface/src/apps/chat/components/lib/message.js b/pkg/interface/src/apps/chat/components/lib/message.js
index 3c71544f43..0a7bc45a92 100644
--- a/pkg/interface/src/apps/chat/components/lib/message.js
+++ b/pkg/interface/src/apps/chat/components/lib/message.js
@@ -154,7 +154,7 @@ export class Message extends Component {
       );
     } else {
         return (
-          <section>
+          <section className="chat-md-message">
             <MessageMarkdown
               source={letter.text}
             />
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;
 }

From 81a9b0d08eb62a18357fb9b3515794b6d85385e3 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam@urizen.co>
Date: Wed, 17 Jun 2020 16:10:46 +1000
Subject: [PATCH 3/3] chat: prevent reflow from image loading

Sets a static height on inline images in chat to prevent loss of scroll
position.

Fixes #2883
---
 pkg/interface/src/apps/chat/components/lib/message.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/pkg/interface/src/apps/chat/components/lib/message.js b/pkg/interface/src/apps/chat/components/lib/message.js
index 0a7bc45a92..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'
             }}
           ></img>
         );