From 904188ca0c72772ba55f162ab0f8879b6a949eac Mon Sep 17 00:00:00 2001
From: Saketh Surya <raisingsurya05@gmail.com>
Date: Wed, 12 Jun 2024 20:04:06 +0530
Subject: [PATCH] Fixed Chatbot responsiveness for mobile screens.

Made few changes to chatbot.css file and fixed the issue with chatbot body overflowing for mobile screens. Now it looks very grand and awesome.
---
 src/components/Chatbot/chatbot.css | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/components/Chatbot/chatbot.css b/src/components/Chatbot/chatbot.css
index cab1e3e..808667a 100644
--- a/src/components/Chatbot/chatbot.css
+++ b/src/components/Chatbot/chatbot.css
@@ -102,6 +102,7 @@ filter: drop-shadow(0 0 6px currentColor);
 transform: translate3d(104em, 0, 0);
 animation: fall var(--fall-duration) var(--fall-delay) linear infinite, tail-fade var(--tail-fade-duration) var(--fall-delay) ease-out infinite;
 
+
 @include sp-layout {
   // For mobile performance, tail-fade animation will be removed QAQ
   animation: fall var(--fall-duration) var(--fall-delay) linear infinite;
@@ -269,3 +270,20 @@ to {
     font-size: 20px; 
   }
   
+  @media screen and ( max-width: 429px ) {
+    .chat-popup-container{
+      width: 80%;
+    }
+    .chat-popup-footer{
+      width: 77%;
+    }
+    .chat-popup-input{
+      width: 80%;
+    }
+    .chat-popup-send{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 25%;
+    }
+  }