Some fixes and styling changes

public/script.js

@@ -29,6 +29,22 @@ const submitMessage = () => {
     messageInput.value = ""
 }
 
+const rowLimit = 3
+let lastMessageScrollheight = messageInput.scrollHeight
+
+messageInput.addEventListener("input", () => {
+    var rows = parseInt(messageInput.getAttribute("rows"))
+    messageInput.setAttribute("rows", "1")
+
+    if (rows < rowLimit && messageInput.scrollHeight > lastMessageScrollheight)
+        rows++
+    else if (rows > 1 && messageInput.scrollHeight < lastMessageScrollheight)
+        rows--
+
+    lastMessageScrollheight = messageInput.scrollHeight
+    messageInput.setAttribute("rows", rows)
+})
+
 const type = (newText) => {
     const element = document.activeElement
     element.setRangeText(

public/style.css

@@ -29,6 +29,7 @@ body {
 #content {
     width: 100%;
     height: 100vh;
+    background-color: var(--secondary);
     display: grid;
     grid-template-rows: 100px 1fr 150px;
 }
@@ -60,11 +61,13 @@ body {
 
 #rooms a {
     background-color: #374a5e;
+    border-radius: 5px;
+    padding: 0 15px;
+    text-align: center;
 }
 
 #rooms a.active {
     background-color: var(--primary);
-    font-weight: bold;
 }
 
 #rooms ul {
@@ -91,6 +94,10 @@ body {
     padding-left: 70px;
 }
 
+#rooms:not(.opened) + div #messages {
+    border-radius: 0;
+}
+
 #rooms form {
     margin: auto 5px 20px 5px;
 }
@@ -131,7 +138,7 @@ footer {
     font-family: inherit;
     font-size: 2rem;
     max-width: 100%;
-    max-height: 10vh;
+    max-height: 90%;
 }
 
 :is(textarea, input[type="text"])::placeholder {
@@ -201,18 +208,12 @@ button:is(:disabled, :hover) {
     border-radius: 20px;
 }
 
-#main-content {
-    background-color: var(--primary);
-    color: white;
-    display: flex;
-    padding: 30px;
-    flex-direction: column;
-}
-
 #messages {
     max-width: 100vw !important;
-    background-color: var(--primary);
+    background-color: #455c73;
+    border-radius: 30px 0 0 30px;
     padding: 30px;
+    transition: border-radius 1s;
     overflow-y: auto;
     display: flex;
     flex-direction: column-reverse;
@@ -220,6 +221,7 @@ button:is(:disabled, :hover) {
 
 #messages::-webkit-scrollbar {
     width: 10px;
+    cursor: pointer !important;
 }
 
 #messages::-webkit-scrollbar-track {

server.js

@@ -34,7 +34,8 @@ app.post("/", (req, res) => {
     if (
         !req.body.room.trim() ||
         !/^[-a-z0-9]+$/i.test(req.body.room) ||
-        rooms[req.body.room]
+        rooms[req.body.room] ||
+        req.body.room.length > 10
     ) {
         return res.redirect("/")
     }

views/index.ejs

@@ -38,20 +38,20 @@
             <ul id="room-container">
                 <% if(Object.keys(rooms).length)
                 {Object.keys(rooms).forEach(room => { %>
-                <li>
+                    <li>
-                    <a
+                        <a
-                        href="/<%= room %>"
+                            href="/<%= room %>"
-                        class="<%= room == roomName ? 'active' : '' %>"
+                            class="<%= room == roomName ? 'active' : '' %>"
-                        ><%= room %></a
+                            ><%= room %></a
-                    >
+                        >
-                </li>
+                    </li>
                 <% })} else {%>
-                <h1 class="medium-header" id="no-rooms">No rooms</h1>
+                    <h1 class="medium-header" id="no-rooms">No rooms</h1>
                 <%} %>
             </ul>
             <form method="POST" action="/" id="room-form" novalidate>
                 <div class="input-group">
-                    <input placeholder="Room Name" type="text" name="room" id="room" class="input-field" />
+                    <input placeholder="Room Name" type="text" name="room" id="room" class="input-field" maxlength="10" />
                     <button class="input-item" type="submit" id="room-button">
                         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle" viewBox="0 0 16 16">
                             <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
@@ -104,7 +104,7 @@
                 <textarea
                     id="message"
                     cols="30"
-                    rows="3"
+                    rows="1"
                     <%- !roomName ? "disabled placeholder='Join a room to send messages'" : 'placeholder="Enter your message"' %>
                 ></textarea>
                 <button