Fixed bugs, and added a run script.

resource/static/css/styles.css

@@ -99,19 +99,28 @@ body {
   padding-right: 18px;
 }
 
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  height: 70vh; /* or whatever height works well for your layout */
+}
+
+
 #chat-box {
-    flex: 1;                   /* This is the key: allows chat-box to grow and fill vertical space */
-    overflow-y: auto;          /* Adds a scrollbar when content overflows vertically */
+  flex: 1;
+  overflow-y: auto;
   padding: 10px;
-    border: 1px solid var(--secondary-color); /* Visual border for chat box */
+  border: 1px solid var(--secondary-color);
   border-radius: 5px;
-    margin-bottom: 10px;       /* Space between chat box and input */
-    background-color: var(--tertiary-color); /* Example background for messages */
+  margin-bottom: 10px;
+  background-color: var(--tertiary-color);
   color: var(--text-color);
   display: flex;
   flex-direction: column;
+  min-height: 0;
 }
 
+
 #chat-box p {
     margin: 0 0 5px 0; /* Adjust message spacing */
     line-height: 1.4;

resource/template/room.html

@@ -2,12 +2,13 @@
 {% block title %}Room {{ room_code }}{% endblock %}
 {% block content %}
     <h1>Room {{ room_code }}</h1>
+    <div class="chat-container">
     <div id="chat-box"></div>
-
     <div class="chat-input-container">
         <input type="text" id="chat-input" placeholder="Say something..." />
         <button id="send-button">Send</button>
     </div>
+    </div>
 
     <script>
         const socket = io();
@@ -16,7 +17,6 @@
         const name = localStorage.getItem('username') || 'Anonymous';
         socket.emit('join', { room, sender: name });
 
-
         // Fetch message history
         fetch(`/api/room/${room}/messages`)
             .then(res => res.json())
@@ -47,8 +47,7 @@
             chatBox.scrollTop = chatBox.scrollHeight;
         });
 
-
-        // Send message
+        // Send message on button click
         document.getElementById('send-button').onclick = () => {
             const text = document.getElementById('chat-input').value;
             const sender = localStorage.getItem('username') || 'Anonymous';
@@ -62,5 +61,13 @@
                 document.getElementById('chat-input').value = '';
             }
         };
+
+        // Send message on Enter key press
+        document.getElementById('chat-input').addEventListener('keydown', (event) => {
+            if (event.key === 'Enter') {
+                document.getElementById('send-button').click();
+            }
+        });
+
     </script>
 {% endblock %}

run.sh

@@ -0,0 +1 @@
+gunicorn -k eventlet -w 1 -b 0.0.0.0:8997 main:app