feat: improve layout of room

package-lock.json

@@ -20,6 +20,7 @@
         "@types/node": "^18.6.5",
         "@types/react": "^18.0.17",
         "@types/react-dom": "^18.0.6",
+        "classnames": "^2.3.1",
         "fast-memoize": "^2.5.2",
         "localforage": "^1.10.0",
         "react": "^18.2.0",
@@ -7753,6 +7754,11 @@
       "resolved": "https://registry.npmjs.org/class-is/-/class-is-1.1.0.tgz",
       "integrity": "sha512-rhjH9AG1fvabIDoGRVH587413LPjTZgmDF9fOFCbFJQV4yuocX1mHxxvXI4g3cGwbVY9wAYIoKlg1N79frJKQw=="
     },
+    "node_modules/classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
     "node_modules/clean-css": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz",
@@ -29134,6 +29140,11 @@
       "resolved": "https://registry.npmjs.org/class-is/-/class-is-1.1.0.tgz",
       "integrity": "sha512-rhjH9AG1fvabIDoGRVH587413LPjTZgmDF9fOFCbFJQV4yuocX1mHxxvXI4g3cGwbVY9wAYIoKlg1N79frJKQw=="
     },
+    "classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
     "clean-css": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz",

package.json

@@ -16,6 +16,7 @@
     "@types/node": "^18.6.5",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
+    "classnames": "^2.3.1",
     "fast-memoize": "^2.5.2",
     "localforage": "^1.10.0",
     "react": "^18.2.0",

src/components/ChatTranscript/ChatTranscript.tsx

@@ -1,14 +1,21 @@
+import { HTMLAttributes } from 'react'
+import cx from 'classnames'
+
 import { Message as IMessage } from 'models/chat'
 import { Message } from 'components/Message'
 
-export interface ChatTranscriptProps {
+export interface ChatTranscriptProps extends HTMLAttributes<HTMLDivElement> {
   messageLog: Array<IMessage>
   userId: string
 }
 
-export const ChatTranscript = ({ messageLog, userId }: ChatTranscriptProps) => {
+export const ChatTranscript = ({
+  className,
+  messageLog,
+  userId,
+}: ChatTranscriptProps) => {
   return (
-    <div className="ChatTranscript flex flex-col">
+    <div className={cx('ChatTranscript flex flex-col', className)}>
       {messageLog.map(message => {
         return <Message key={message.id} message={message} userId={userId} />
       })}

src/components/Room/Room.tsx

@@ -75,9 +75,13 @@ export function Room({
   })
 
   return (
-    <div className="p-4">
+    <div className="h-full p-4 flex flex-col">
       <Typography>Room ID: {roomId}</Typography>
-      <Typography>Open this page in another tab.</Typography>
+      <ChatTranscript
+        messageLog={messageLog}
+        userId={userId}
+        className="grow overflow-auto"
+      />
       <form onSubmit={handleMessageSubmit} className="max-w-xl mt-8">
         <FormControl fullWidth>
           <TextField
@@ -99,7 +103,6 @@ export function Room({
           Send
         </Button>
       </form>
-      <ChatTranscript messageLog={messageLog} userId={userId} />
     </div>
   )
 }