From 6909622c09e5c0061ab9ad320b2bc30eb1bcba86 Mon Sep 17 00:00:00 2001
From: Russell Ballestrini <russell.ballestrini@gmail.com>
Date: Fri, 9 Jun 2023 10:52:57 -0400
Subject: [PATCH] use css grid to make chatroom big.

---
 templates/chat.html | 71 ++++++++++++++++++++++++---------------------
 1 file changed, 38 insertions(+), 33 deletions(-)
diff --git a/templates/chat.html b/templates/chat.html
index 2349092..53e63b8 100644
--- a/templates/chat.html
+++ b/templates/chat.html
@@ -13,43 +13,48 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.min.js"></script>
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <style>
-        body {
-            font-family: Arial, sans-serif;
-            background-color: #f7f7f7;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            height: 75vh;
-            margin: 0;
-        }
-        #chat-container {
-            background-color: #ffffff;
-            border-radius: 5px;
-            padding: 15px;
-            width: 100%;
-            max-width: 600px;
-            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
-        }
-        #chat {
-            height: 300px;
-            overflow-y: scroll;
-            border: 1px solid #e1e1e1;
-            border-radius: 5px;
-            padding: 10px;
-            margin-bottom: 10px;
-        }
-        #message {
-            width: 98%;
-            border: 1px solid #e1e1e1;
-            border-radius: 5px;
-            padding: 5px;
-        }
+    html, body {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        font-family: Arial, sans-serif;
+        background-color: #f7f7f7;
+        display: grid;
+        place-items: center;
+    }
+    
+    #chat-container {
+        display: grid;
+        grid-template-rows: 1fr auto;
+        width: 100%;
+        height: 90vh;
+        background-color: #ffffff;
+        border-radius: 5px;
+        padding: 15px;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+        box-sizing: border-box;
+    }
+    
+    #chat {
+        overflow-y: auto;
+        border: 1px solid #e1e1e1;
+        border-radius: 5px;
+        padding: 10px;
+        margin-bottom: 10px;
+        min-width: 400px;
+    }
+    
+    #message {
+        width: 100%;
+        border: 1px solid #e1e1e1;
+        border-radius: 5px;
+        padding: 5px;
+    }
+
    </style>
 </head>
 <body>
     <div id="chat-container">
-        <h2>{{ room }}</h2>
         <div id="chat"></div>
         <form id="message-form">
             <input id="message" type="text" placeholder="Type your message...">
