From 7ae740203ddc0f2d9b599c9d6786d735fe447592 Mon Sep 17 00:00:00 2001
From: Romain Mallard <romaimallard@gmail.com>
Date: Wed, 11 Mar 2026 14:05:01 +0100
Subject: [PATCH] FIX: chat and room size

---
 src/components/MainApp.css           |  2 +-
 src/components/widget/RoomWidget.css | 12 +++++-------
 src/components/widget/chatWidget.css | 25 +++++++++++++++++++++----
 src/components/widget/chatWidget.jsx | 12 +++++++-----
 src/components/widget/roomWidget.jsx |  2 +-
 5 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/src/components/MainApp.css b/src/components/MainApp.css
index 7bcc32b..b04e116 100644
--- a/src/components/MainApp.css
+++ b/src/components/MainApp.css
@@ -17,5 +17,5 @@
 .toolbutton {
   margin: .5rem;
   height: 80%;
-  width: 20%;  
+  width: 10%;  
 }
diff --git a/src/components/widget/RoomWidget.css b/src/components/widget/RoomWidget.css
index 1dfe70a..60351c1 100644
--- a/src/components/widget/RoomWidget.css
+++ b/src/components/widget/RoomWidget.css
@@ -9,26 +9,24 @@
   background-color: var(--card) ;
   display: grid;
   padding: 16px;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
   gap: 1rem;
 }
 
 /* Room card */
 .card {
-  background-color: var(--panel) ;
   padding: 1rem;
   border-radius: 10px;
+  gap: 0.5rem;
+  background-color: var(--panel) ;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
 }
 
-.roomCard input {
-  width: 100%;
-}
+
 
 .actions {
   display: flex;
-  justify-content: space-between;
+  justify-content: space-around;
   gap: 0.5rem;
 }
diff --git a/src/components/widget/chatWidget.css b/src/components/widget/chatWidget.css
index 4211cae..4111d42 100644
--- a/src/components/widget/chatWidget.css
+++ b/src/components/widget/chatWidget.css
@@ -7,22 +7,34 @@
   background: var(--card);
   border-radius: 10px;
   overflow: hidden;
+  height: 93vh;
 }
 
-.convlist {
+.convHeader {
   display: flex;
   flex-direction: row;
+  justify-content: space-between;
+  
   gap: 0.5rem;
   padding: 8px;
   overflow-y: auto;
   height: 20%;
 }
 
+.convList{
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  padding: 8px;
+  
+}
+
 .convcard {
   padding: 0.5rem 0.75rem;
   background: var(--panel);
   border-radius: 6px;
   cursor: pointer;
+  overflow: hidden;
 }
 
 .convcard:hover {
@@ -31,7 +43,7 @@
 
 .senderBox{
   display: flex;
-  height: 10%;
+  height: 20%;
 }
 
 .senderBox * {
@@ -47,17 +59,18 @@ width: 70%;
 
 .sendbutton{
   width: 30%;
+  border-radius: 0%;
 }
 
 
 .messageCard {
-  height: 100%;
+  height: auto;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 
   background: var(--messageCard);
-  overflow-y: auto;
+  overflow-y:scroll;
 }
 
 /* Messages */
@@ -92,6 +105,10 @@ margin: 5px;
 
 }
 
+.convUtils{
+    width: 25%;
+}
+
 .convUtils button {
   margin: 3px;
 
diff --git a/src/components/widget/chatWidget.jsx b/src/components/widget/chatWidget.jsx
index 7577da1..49b406c 100644
--- a/src/components/widget/chatWidget.jsx
+++ b/src/components/widget/chatWidget.jsx
@@ -38,8 +38,9 @@ export default function ChatWidget({convlist}) {
 
     return (
         <div className="chatWidget">
-            <div className="convlist">
-                {convlist.map(conv => (
+            <div className="convHeader">
+                <div className="convList">
+                    {convlist.map(conv => (
                     <ConvCard
                         key={conv.id}
                         id={conv.id}
@@ -47,7 +48,9 @@ export default function ChatWidget({convlist}) {
                         onOpenConv={setActiveConvId}
                     />
                 ))}
-
+            
+                </div>
+                
                 <div className="convUtils">
                     <button
                         disabled={!activeConvId}
@@ -137,8 +140,7 @@ function SenderBox({ conv_id, onSend, disabled }) {
 function ConvCard({id, title, onOpenConv}) {
     return(
         <div className="convcard" onClick={() => onOpenConv(id)} >
-            <h3>ConvId : {id} </h3>
-            <h3>Name : {title}</h3>
+            <h3>{title}</h3>
            
         </div>
     )
diff --git a/src/components/widget/roomWidget.jsx b/src/components/widget/roomWidget.jsx
index 75585b5..5db7acb 100644
--- a/src/components/widget/roomWidget.jsx
+++ b/src/components/widget/roomWidget.jsx
@@ -41,7 +41,7 @@ function RoomCard({ number, status ,id}) {
   return (
       <div className="card">
         <h3>Room {number}</h3>
-        <h4>Id {id}</h4>
+        
 
         {!editing ?(
           <p onClick={() => setEdtiting(true)} style={{ cursor: "pointer" }}>