Update README.md

README.md

@@ -248,6 +248,12 @@ body {
     background-color: #FDEFDF !important;
 }
 
+/* TO HAVE A SCROLLBAR INSIDE THE CHATBOX */
+.gradio-container .chatbox {
+    overflow-y: auto;
+    max-height: 500px; /* Adjust this value as needed */
+}
+
 /* TO CHANGE THE FONT */
 @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;1,600&display=swap');
 
@@ -298,7 +304,6 @@ button.sm.secondary.svelte-cmf5ev:hover {
     border-radius: 6px !important;  /* Adjust this value as needed */
     overflow: hidden !important;  /* This ensures the content doesn't spill out of the rounded corners */
 }
-
 .gradio-container .styler.svelte-iyf88w,
 button.sm.secondary.svelte-cmf5ev > div {
     border-radius: 8px !important;  /* Slightly smaller than the outer border radius */
@@ -310,7 +315,9 @@ button.sm.secondary.svelte-cmf5ev > div {
 .gradio-container .bubble-wrap.svelte-1e1jlin {
     border: 1.5px solid #F7D9DA !important;
     border-radius: 8px !important;  /* Adjust this value as needed */
-    overflow: hidden !important;  /* This ensures the content doesn't spill out of the rounded corners */
+    /* overflow: hidden !important;  /* This ensures the content doesn't spill out of the rounded corners */ */
+    overflow-y: auto !important;  /* Enable vertical scrolling */
+    max-height: 500px; /* Set a maximum height for the chat container */
 }
 .gradio-container .bubble-wrap.svelte-1e1jlin > div {
     border-radius: 10px !important;  /* Slightly smaller than the outer border radius */