Adjust the padding for the chat bubbles

Still not perfect solution, moved around the padding-bottom: 100px in the different CSS files, but when the bot is populating the next bubbles it still squeezes to the right. #4

client/src/components/newPrompt/newPrompt.css

@@ -1,52 +1,50 @@
-.endChat{
-    padding-bottom: 100px;
+.newForm {
+  /* Accounts for sidebar width + gap */
+  width: calc(100% - 0.65 * (100vw - 50px));
+  position: fixed;
+  bottom: 40px;
+  background-color: #2c2937;
+  border-radius: 20px;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  padding: 0px 20px;
+
+  input {
+    flex: 1;
+    padding: 20px;
+    border: none;
+    outline: none;
+    background-color: transparent;
+    color: #ececec;
+  }
+
+  textarea {
+    flex: 1;
+    padding: 20px;
+    border: none;
+    outline: none;
+    background-color: transparent;
+    color: #ececec;
+    resize: none;
+    font-family: inherit;
+    font-size: 14px;
   }
-    .newForm{
-      /* Accounts for sidebar width + gap */
-      width: calc(100% - 0.65 * (100vw - 50px));
-      position: fixed;
-      bottom: 40px;
-      background-color: #2c2937;
-      border-radius: 20px;
-      display: flex;
-      align-items: center;
-      gap: 20px;
-      padding: 0px 20px;
-
-      input{
-        flex:1;
-        padding:20px;
-        border: none;
-        outline: none;
-        background-color: transparent;
-        color: #ececec;
-      }
 
-      textarea{
-        flex:1;
-        padding:20px;
-        border: none;
-        outline: none;
-        background-color: transparent;
-        color: #ececec;
-        resize: none;
-        font-family: inherit;
-        font-size: 14px;
-      }
-
-      button,label{
-        border-radius: 50%;
-        background-color: #605e68;
-        border: none;
-        padding: 10px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-
-        img{
-          width: 16px;
-          height: 16px;
-        }
-      }
-    }
+  button,
+  label {
+    border-radius: 50%;
+    background-color: #605e68;
+    border: none;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    img {
+      width: 16px;
+      height: 16px;
+    }
+  }
+}

client/src/routes/chatPage/chatPage.css

@@ -6,29 +6,33 @@
   position: relative;
   overflow: auto;
   scrollbar-gutter: stable;
+  padding-bottom: 100px;
 }
 
 .wrapper {
   flex: 1;
   width: 100%;
   display: flex;
   justify-content: center;
-  align-items: center; /* Ensure children are centered */
+  align-items: center;
+  /* Ensure children are centered */
 }
 
 .chat {
   width: 80%;
   display: flex;
   flex-direction: column;
   gap: 20px;
-
-  p, li {
+
+  p,
+  li {
     margin: 10px 0px;
   }
 
   .message {
     padding: 20px;
-
+    margin-bottom: 20px;
+
     &.user {
       background-color: #2c2937;
       border-radius: 20px;
@@ -49,8 +53,10 @@
 
 .copy-button {
   position: absolute;
-  top: 10px; /* Adjust based on your needs */
-  right: 10px; /* Adjust based on your needs */
+  top: 10px;
+  /* Adjust based on your needs */
+  right: 10px;
+  /* Adjust based on your needs */
   background: rgba(0, 0, 0, 0.5);
   color: white;
   border: none;
@@ -69,4 +75,4 @@
   display: flex;
   justify-content: center;
   width: 100%;
-}
+}