@pubuduth-aplicy/chat-ui 2.2.22 → 2.2.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubuduth-aplicy/chat-ui",
-  "version": "2.2.22",
+  "version": "2.2.24",
   "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/sidebar/Conversations.tsx

@@ -335,8 +335,7 @@ const Conversations = () => {
 
               {activeTab === "service" &&
                 Object.entries(filteredGroupedServiceChats).length > 0 && (
-                  <div className="p-2"
-                  style={{height:'400px'}}>
+                  <div className="p-2 h-full">
                     {Object.entries(filteredGroupedServiceChats).map(
                       ([
                         serviceId,

package/src/components/sidebar/Sidebar.tsx

@@ -3,7 +3,7 @@ import SearchInput from "./SearchInput";
 
 export const Sidebar = () => {
   return (
-    <div className="">
+    <div className="chatSidebarWrapper">
       <SearchInput />
       <div className="divider px-3"></div>
       <Conversations />

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; */
@@ -126,10 +126,18 @@
   width: 100%;
 }
 
+.chatSidebarWrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
 .chatSidebarConversations {
   display: flex;
   overflow: auto;
-  height: 100%;
+  flex: 1 1 0%;
+  min-height: 0;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   flex-direction: column;
@@ -439,8 +447,6 @@
   width: 100%;
   font-family: Arial, sans-serif;
   margin-bottom: 8px;
-  margin: 0 auto;
-  max-width: 1200px;
 }
 
 .message-row {
@@ -572,7 +578,7 @@
 
 @media (min-width: 768px) {
   .grid-container {
-    height: 550px;
+    height: calc(100vh - 4rem);
     grid-template-columns: repeat(9, minmax(0, 1fr));
     gap: 1rem;
   }