@pubuduth-aplicy/chat-ui 2.2.21 → 2.2.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.2.21",
+  "version": "2.2.23",
   "description": "This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.",
   "license": "ISC",
   "author": "",

package/src/components/Chat.tsx

@@ -61,7 +61,7 @@ export const Chat = () => {
   }, [socket, sendMessage, updateMessageStatus, selectedConversation]);
 
   return (
-    <div className="container mx-auto mb-5">
+    <div className="w-full mb-5">
       <div className="grid-container">
         <div className={`sidebarContainer dark:bg-gray-800 ${
             selectedConversation ? "mobile-hidden" : "mobile-visible"

package/src/components/messages/Messages.tsx

@@ -217,7 +217,7 @@ const Messages = () => {
     <div
       ref={chatContainerRef}
       className="chatMessages"
-      style={{ overflowY: "auto", height: "100%", position: "relative" }}
+      style={{ overflowY: "auto", flex: "1 1 0%", minHeight: 0, position: "relative" }}
     >
       <SystemNotice />
       <div ref={ref} className="my-8">
@@ -226,11 +226,7 @@ const Messages = () => {
       {messages?.length > 0 ? (
         messages?.map((message: any) =>
           message ? (
-            <div
-              key={message._id}
-              data-message-id={message._id}
-              style={{ flex: 1, minHeight: 0, overflowY: "auto" }}
-            >
+            <div key={message._id} data-message-id={message._id}>
               <Message message={message} />
             </div>
           ) : null,

package/src/style/style.css

@@ -3,7 +3,7 @@
   overflow: hidden;
   /* grid-template-columns: repeat(12, minmax(0, 1fr)); */
   border-radius: 0.5rem;
-  width: '100%';
+  width: 100%;
   margin-top: 10px;
   background-clip: padding-box;
   /* background-color: #9CA3AF; */
@@ -191,8 +191,8 @@
 .chatMessageContainer {
   display: flex;
   flex-direction: column;
-  justify-content: center;
   height: 100%;
+  min-height: 0;
   background-color: #FEFEFF;
 }
 
@@ -439,8 +439,6 @@
   width: 100%;
   font-family: Arial, sans-serif;
   margin-bottom: 8px;
-  margin: 0 auto;
-  max-width: 1200px;
 }
 
 .message-row {