Refactor chat layout and styles

H1B0B0 · Feb 16, 2024 · 5392ac1 · 5392ac1
1 parent 2b6c279
commit 5392ac1
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 6 deletions.
diff --git a/frontend/src/app/chat/[roomId]/ChatBody.tsx b/frontend/src/app/chat/[roomId]/ChatBody.tsx
@@ -22,7 +22,7 @@ function Page() {
   }, []);
 
   return (
-    <div className="flex relative flex-col w-full h-screen space-x-2 space-y-2">
+    <div className="flex relative flex-col w-full h-screen">
       <ChatHeader roomId={roomId} />
       <ChatBody roomId={roomId} />
       <ChatFooter roomId={roomId} />

diff --git a/frontend/src/app/chat/[roomId]/page.tsx b/frontend/src/app/chat/[roomId]/page.tsx
@@ -27,7 +27,10 @@ function Page() {
   }, []);
 
   return (
-    <div className="flex relative flex-col w-full h-screen">
+    <div
+      className="flex relative flex-col w-full h-screen"
+      style={{ height: "calc(100vh - 1rem)" }}
+    >
       <ChatHeader roomId={roomId} />
       <ChatBody roomId={roomId} />
       <ChatFooter roomId={roomId} />

diff --git a/frontend/src/app/chat/layout.tsx b/frontend/src/app/chat/layout.tsx
@@ -10,7 +10,7 @@ export default function RoomLayout({
   return (
     <RoomProvider>
       <SocketProvider>
-        <div className="flex h-screen space-x-2 space-y-2">
+        <div className="flex gap-2 m-2 overflow-auto">
           <RoomSideBar />
           {children}
         </div>

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
@@ -17,7 +17,7 @@
 
 @layer utilities {
   body.dark {
-    background-color: #222222; /* same as bg-gray-800 */
+    background-color: #161616; /* same as bg-gray-800 */
   }
 }
 @layer base {

diff --git a/frontend/src/components/Chat/ChatBody.tsx b/frontend/src/components/Chat/ChatBody.tsx
@@ -81,7 +81,14 @@ function ChatBody({ roomId }: { roomId: string }) {
   }, [socket, roomId]);
 
   return (
-    <div style={{ flexGrow: 1, overflowY: "auto" }}>
+    <div
+      style={{
+        flexGrow: 1,
+        overflowY: "auto",
+        overflowX: "auto",
+        height: "calc(100vh - 60px)",
+      }}
+    >
       <div className="basis_[85%] overflow-y-scroll p-5 w-full flex flex-col gap-2 custom-scrollbar rounded-lg">
         {messages[roomId]?.map((message: any, index: number) => (
           <Message

diff --git a/frontend/src/components/Room/RoomSideBar.tsx b/frontend/src/components/Room/RoomSideBar.tsx
@@ -50,7 +50,10 @@ function RoomSideBar() {
   }, [showAddRoomPanel]);
 
   return (
-    <div className="overflow-y-scroll custom-scrollbar w-full sm:w-20 h-screen dark:bg-neutral-800 bg-slate-200 md:w-1/4 rounded-lg">
+    <div
+      className="overflow-y-scroll custom-scrollbar w-full sm:w-20 h-screen dark:bg-neutral-800 bg-slate-200 md:w-1/4 rounded-lg"
+      style={{ maxWidth: "25vw", height: "calc(100vh - 1rem)" }}
+    >
       <div className="flex justify-center">
         <button
           type="submit"