Merge pull request #336 from MastanSayyad/main

chatbot responsiveness update

src/components/chatbot.css

@@ -1,9 +1,8 @@
 .chatbot-container {
   position: fixed;
-
   bottom: 20px;
   right: 20px;
-  /* z-index: 1000; Ensure it's above other elements */
+  z-index: 1000;
 }
 
 .chatbot-toggle-button {
@@ -28,37 +27,36 @@
 }
 
 .chatbot {
-  width: 500px;
-  max-width: 90%; /* Ensure the chatbot doesn't exceed the screen width */
-  z-index: 1000; /* Ensure it's above other elements */
+  width: 400px;
+  max-width: 90%;
+  z-index: 1000;
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
   border-radius: 10px;
-  position: absolute;
-  bottom: 10px; /* Adjust position based on the toggle button */
-  right: 300px; /* Position the chatbot to the left of the button */
+  position: fixed;
+  bottom: 80px;
+  right: 20px;
 }
 
-/* Ensure the chatbot does not overflow the screen */
-@media (max-width: 300px) {
+@media (max-width: 600px) {
   .chatbot {
-    bottom: 60px; /* Adjust based on button size on smaller screens */
-    right: 10px; /* Adjust to keep it within the screen */
-    left: 10px; /* Adjust to keep it within the screen */
+    width: 100%;
+    bottom: 70px;
+    right: 0;
+    left: 45;
   }
 }
 
 .chatbot-initial {
-  font-family: Arial, sans-serif; /* Customize font */
-  font-size: 24px; /* Customize font size */
-  font-weight: bold; /* Customize font weight */
+  font-family: Arial, sans-serif;
+  font-size: 24px;
+  font-weight: bold;
 }
 
-/* Additional styling to ensure text visibility */
 .chatbot .react-chatbot-kit-chat-input {
   background-color: rgb(224, 221, 221);
-  color: black; /* Ensure text is visible */
+  color: black;
 }
 
 .chatbot .react-chatbot-kit-chat-input::placeholder {
-  color: #323131; /* Placeholder color */
+  color: #323131;
 }