add container

Author: weboko

src/components/ChatScreen/ChatScreen.module.css

@@ -51,4 +51,12 @@
 }
 .sendButton:active {
   opacity: 0.6;
+}
+
+/* Added to manage keyboard visibility */
+.chatScreenContainer {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1; /* Allow this container to grow and fill available space */
+  overflow: hidden; /* Prevent parent scrolling when keyboard is up */
 }

src/components/ChatScreen/ChatScreen.tsx

@@ -40,7 +40,7 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({ messages, sendMessage })
   };
 
   return (
-    <>
+    <div className={styles.chatScreenContainer}> {/* Changed from <> to <div> and added className */}
       <div className={styles.messagesContainer}>
         {messages.map(msg => (
           <ChatMessage
@@ -81,6 +81,6 @@ export const ChatScreen: React.FC<ChatScreenProps> = ({ messages, sendMessage })
           </svg>
         </button>
       </div>
-    </>
+    </div> // Corresponding closing div
   );
 };