fix: improve panel behaviour at small screen sizes

main.js

@@ -23,6 +23,15 @@ class Conversation {
         this.messages = initialMessages;
     }
 
+    addMessage(message) {
+        this.messages.push(message);
+        this.render();
+
+        var elements = document.getElementById("messages").children;
+        var lastElement = elements[elements.length - 1];
+        lastElement.scrollIntoView();
+    }
+
     // for the user to send their own messages
     sendUserMessage(text) {
 
@@ -74,7 +83,7 @@ class Conversation {
                 messageText = json.message;
             }
 
-            this.messages.push(new AgentMessage(messageText));
+            this.addMessage(new AgentMessage(messageText));
             this.render();
         })
         .catch(error => {
@@ -91,7 +100,7 @@ class Conversation {
             //    this.render();
             //}, 5000);
         }, 1000);
-        this.messages.push(message);
+        this.addMessage(message);
     }
 
     // update the current HTML based on messages

styles.css

@@ -72,6 +72,9 @@ body {
         max-width: 300px;
     }
 
+    #main-panel {
+        width: calc(100% - 300px);
+    }
 }
 
 #side-panel .conversation {
@@ -105,7 +108,7 @@ body {
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
-    width: calc(100% - 300px);
+    width: 100%;
 }
 
 #page {