layout fixes

sass/_project-sass/_project-Main.scss

@@ -2280,87 +2280,90 @@ pre, code {
   color: #FFFFFF;
 }
 
+
+
+
+
+
+
+
+
+
 .chat-container {
   display: flex;
   flex-direction: column;
-  height: 95%; /* This will make it fill its parent container */
+  height: calc(100vh - 60px); /* Adjust the height as needed */
   background-color: #121212;
   color: #e0e0e0;
-
   border-left: 1px solid #373737;
   font-family: Arial, sans-serif;
 }
 
 .chat-box {
-  flex-grow: 1;
+  flex: 1;
   overflow-y: auto;
   padding: 10px;
   background-color: #1d1f21;
-
   font-weight: 300;
   font-size: 13.5px;
   line-height: 1.5em;
+}
 
-  p {
+.chat-box p {
   font-weight: 300;
   font-size: 13.5px;
   word-break: break-word;
-  }
+}
 
-  ul, ol {
+.chat-box ul,
+.chat-box ol {
   list-style: square;
-  }
+}
 
-  li {
+.chat-box li {
   font-weight: 300;
   font-size: 13.5px;
-  }
+}
 
-  .message {
+.message {
   margin-bottom: 12px;
   padding: 8px;
   border-radius: 4px;
   background-color: #333;
   color: #fff;
-  }
+}
 
-  .bot-message {
+.bot-message {
   text-align: left;
-  }
+}
 
-  .user-message {
+.user-message {
   text-align: left;
   background-color: #5e95a1;
-  }
+}
 
-  div {
-    background: #16414c;
-    color: #a9b9b9;
-    border: 0;
-  }
-
-  div code {
+.chat-box div code {
   display: inline;
   padding: 2px;
-  }
+}
 
-  div pre {
+.chat-box div pre {
   display: block;
   width: 100%;
-  }
+}
 
-  div pre code {
+.chat-box div pre code {
   display: block;
-  }
+}
 
-  div code {
+.chat-box div code {
   border-left: 0px;
   border: 0px;
   word-wrap: break-word;
   white-space: pre-wrap;
-  }
+}
 
-  .copy-button {
+.copy-button {
   position: absolute;
   top: 10px;
   right: 10px;
@@ -2368,35 +2371,37 @@ pre, code {
   padding: 5px 10px;
   cursor: pointer;
   border-radius: 4px;
-  }
-
-  .copy-button:hover {
-    background-color: #45a049;
-  }
 }
 
-.chat-container {
-  form {
-    display: flex;
+.copy-button:hover {
+  background-color: #45a049;
+}
+
+#chat-form {
   padding: 10px;
   background-color: #252525;
-  }
+  margin-bottom: 25px;
 
   input[type="text"] {
-    flex-grow: 1;
-    padding: 10px;
     margin-right: 10px;
+    margin-bottom: 7px;
     background-color: #333;
     border: 1px solid #777;
     color: #fff;
+    width: calc(100% - 90px);
   }
 
   button {
-    margin-top: 9px;
-    height: 30px;
+    margin-bottom: 5px;
   }
 }
 
+
+
+
+
+
+
 .welcoming-cat {
   width: 200px;
   float: right;

views/site_files/text_editor.erb

@@ -108,11 +108,11 @@
 <script src="/js/sse.min.js"></script>
 <script src="/js/chat.js"></script>
 
-<div class="row editor" style="display: flex; flex-wrap: wrap;">
-  <div class="col col-66" style="flex: 66%; padding: 10px">
+<div class="row editor">
+  <div class="col col-66">
     <div id="editor"><h3>Loading...</h3></div>
   </div>
-  <div class="col col-33 chat-col" style="flex: 33%">
+  <div class="col col-33 chat-col">
     <div class="chat-container">
       <div id="chat-box" class="chat-box">
         <div class="bot-message message">