From a8229109a2aea9cf87317b529458df65205d0bc5 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Thu, 5 Dec 2024 14:33:08 -0300
Subject: [PATCH] refactor: Adjust chat view layout for responsiveness (#5061)

* refactor: Adjust chat view layout for responsiveness

The code changes in this commit adjust the layout of the chat view component to improve responsiveness. Specifically, the CSS classes for the chat container and input container have been modified to make them responsive on different screen sizes. This ensures that the chat view is displayed properly on both desktop and mobile devices.

Refactoring the layout in this way enhances the user experience by making the chat view more accessible and user-friendly across different devices.
---
 .../src/modals/IOModal/components/chatView/newChatView.tsx  | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/modals/IOModal/components/chatView/newChatView.tsx b/src/frontend/src/modals/IOModal/components/chatView/newChatView.tsx
index 95a51b4e6..c04670b3f 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/newChatView.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/newChatView.tsx
@@ -184,7 +184,9 @@ export default function ChatView({
           ))}
         <div
           className={
-            lockChat ? "w-5/6 max-w-[768px] py-4 word-break-break-word" : ""
+            lockChat
+              ? "m-auto w-full max-w-[768px] py-4 word-break-break-word md:w-5/6"
+              : ""
           }
           ref={ref}
         >
@@ -193,7 +195,7 @@ export default function ChatView({
             flowRunningSkeletonMemo}
         </div>
       </div>
-      <div className="m-auto w-5/6 max-w-[768px]">
+      <div className="m-auto w-full max-w-[768px] md:w-5/6">
         <ChatInput
           chatValue={chatValue}
           noInput={!inputTypes.includes("ChatInput")}