chat room is scrollable

src/app.scss

@@ -95,3 +95,15 @@ div.copy-prompt {
   top: 5px;
   right: 5px;
 }
+
+.message-container{
+  display: flex;
+  flex-direction: column;
+  height: 720px;
+}
+.message-list{
+  // max-height: 100%;
+  overflow-y: auto;
+  flex: 1;
+  margin-bottom: 10px;
+}

src/lib/Chat.svelte

@@ -102,7 +102,7 @@
     // Scroll to the bottom of the page after any updates to the messages array
     window.scrollTo(0, document.body.scrollHeight);
     input.focus();
-    copyFunction()
+    copyFunction();
   });
 
   // Marked options
@@ -286,7 +286,13 @@
       const copyPrompt = document.createElement("div");
       copyPrompt.className = "copy-prompt";
       const copyPromptText = document.createElement("button");
-      copyPromptText.classList.add("button", "is-light", "is-outlined", "is-small", "is-responsive");
+      copyPromptText.classList.add(
+        "button",
+        "is-light",
+        "is-outlined",
+        "is-small",
+        "is-responsive"
+      );
       copyPromptText.innerHTML = showCopyMessage;
       copyPrompt.appendChild(copyPromptText);
       block.appendChild(copyPrompt);
@@ -301,7 +307,7 @@
           }, 1000);
         });
     });
-  }
+  };
 </script>
 
 <nav class="level chat-header">
@@ -357,8 +363,9 @@
     </p>
   </div>
 </nav>
-
-{#each chat.messages as message}
+<div class="is-fullhd message-container">
+  <div class="message-list">
+    {#each chat.messages as message}
       {#if message.role === "user"}
         <article
           class="message is-info user-message"
@@ -410,28 +417,32 @@
             />
             {#if message.usage}
               <p class="is-size-7">
-            This message was generated using <span class="has-text-weight-bold"
+                This message was generated using <span
+                  class="has-text-weight-bold"
                   >{message.usage.total_tokens}</span
                 >
                 tokens ~=
                 <span class="has-text-weight-bold"
-              >${(message.usage.total_tokens * token_price).toFixed(6)}</span
+                  >${(message.usage.total_tokens * token_price).toFixed(
+                    6
+                  )}</span
                 >
               </p>
             {/if}
           </div>
         </article>
       {/if}
-{/each}
-
-{#if updating}
+    {/each}
+  </div>
+  <div class="message-send">
+    {#if updating}
       <progress class="progress is-small is-dark" max="100" />
-{/if}
+    {/if}
 
-<form
+    <form
       class="field has-addons has-addons-right"
       on:submit|preventDefault={() => submitForm()}
->
+    >
       <p class="control is-expanded">
         <textarea
           class="input is-info is-focused chat-input"
@@ -468,7 +479,9 @@
       <p class="control">
         <button class="button is-info" type="submit">Send</button>
       </p>
-</form>
+    </form>
+  </div>
+</div>
 
 <svelte:window
   on:keydown={(event) => {