From 265ef70d709bdafcae426b7685b8436a47cc7aa2 Mon Sep 17 00:00:00 2001
From: abirc8010 <abirc8010@gmail.com>
Date: Mon, 11 Nov 2024 01:58:12 +0530
Subject: [PATCH] Made message box responsive and fixed alignment

---
 .../react/src/views/ChatBody/ChatBody.styles.js     |  2 +-
 .../react/src/views/ChatInput/ChatInput.styles.js   | 13 +++++++++++--
 .../react/src/views/ChatLayout/ChatLayout.styles.js |  1 +
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/views/ChatBody/ChatBody.styles.js b/packages/react/src/views/ChatBody/ChatBody.styles.js
index 36fc549b5..06be313a1 100644
--- a/packages/react/src/views/ChatBody/ChatBody.styles.js
+++ b/packages/react/src/views/ChatBody/ChatBody.styles.js
@@ -9,7 +9,7 @@ export const getChatbodyStyles = () => {
       overflow-x: hidden;
       display: flex;
       flex-direction: column-reverse;
-      max-height: 600px;
+      max-height: 100%;
       position: relative;
       padding-top: 70px;
       margin-top: 0.25rem;
diff --git a/packages/react/src/views/ChatInput/ChatInput.styles.js b/packages/react/src/views/ChatInput/ChatInput.styles.js
index 73e91eb97..a1474877f 100644
--- a/packages/react/src/views/ChatInput/ChatInput.styles.js
+++ b/packages/react/src/views/ChatInput/ChatInput.styles.js
@@ -22,6 +22,9 @@ export const getChatInputStyles = (theme) => {
       justify-content: center;
       flex-direction: row;
       padding: 0.5rem;
+      @media (max-width: 383px) {
+        min-height: 100px;
+      }
     `,
 
     iconCursor: css`
@@ -51,6 +54,9 @@ export const getChatInputStyles = (theme) => {
       &::placeholder {
         padding-left: 5px;
       }
+      @media (max-width: 383px) {
+        font-size: 18px;
+      }
     `,
   };
 
@@ -68,9 +74,12 @@ export const getChatInputFormattingToolbarStyles = ({ theme, mode }) => {
         : lighten(theme.colors.background, 1)};
       display: flex;
       position: relative;
-      flex-direction: row;
-      gap: 0.375rem;
+      gap: 0.1rem;
       border-radius: 0 0 ${theme.radius} ${theme.radius};
+      @media (max-width: 383px) {
+        display: grid;
+        grid-template-columns: repeat(5, 0.2fr);
+      }
     `,
   };
   return styles;
diff --git a/packages/react/src/views/ChatLayout/ChatLayout.styles.js b/packages/react/src/views/ChatLayout/ChatLayout.styles.js
index 3afa72649..56dd748cb 100644
--- a/packages/react/src/views/ChatLayout/ChatLayout.styles.js
+++ b/packages/react/src/views/ChatLayout/ChatLayout.styles.js
@@ -12,6 +12,7 @@ const styles = {
     flex: 1;
     flex-direction: column;
     position: relative;
+    min-width: 0;
   `,
 
   sidebar: css`