feat: reverse message order in display and enhance compose panel styling

Author: enjoy15

chat-app/frontend/app.js

@@ -28,7 +28,7 @@ function formatTime(isoString) {
 function renderMessages(messages) {
   messagesEl.innerHTML = '';
 
-  for (const message of messages) {
+  for (const message of [...messages].reverse()) {
     const item = document.createElement('li');
     item.className = 'message';
 
@@ -43,12 +43,6 @@ function renderMessages(messages) {
     messagesEl.appendChild(item);
   }
 
-  if (messages.length !== lastMessageCount && messages.length > 0) {
-    requestAnimationFrame(() => {
-      messagesEl.scrollTo({ top: messagesEl.scrollHeight, behavior: 'smooth' });
-    });
-  }
-
   lastMessageCount = messages.length;
 }
 

chat-app/frontend/index.html

@@ -16,7 +16,7 @@ <h1>Basic Chat App</h1>
         </p>
       </header>
 
-      <section class="panel">
+      <section class="panel panel--compose">
         <h2>Send a message</h2>
         <form id="message-form" class="form">
           <label>

chat-app/frontend/style.css

@@ -63,6 +63,12 @@ p {
   margin-bottom: 18px;
 }
 
+.panel--compose {
+  position: sticky;
+  top: 16px;
+  z-index: 1;
+}
+
 .form {
   display: grid;
   gap: 14px;
@@ -146,7 +152,7 @@ button.secondary:hover {
   margin: 16px 0 0;
   display: grid;
   gap: 12px;
-  max-height: 50vh;
+  max-height: 55vh;
   overflow-y: auto;
 }