misc: final touches to layout

README.md

@@ -91,7 +91,7 @@ pnpm test
 - no user authentication
 - Client Websockets should be more robust, i.e. reconnecting
 - Client state does not persist on refresh
-- Client messages are rendered all at once, a virtual list would be better after a certain amount of messages
+- Performance: when sending a very large amount of messages, like 100000, the browser will freeze. This is not due to bad rendering per se, but the websocket message ingestion. Fixing this would be quite easy with a server-sided message debounce.
 - Test coverage very limited: only a single component is tested
 - Keyboard navigation and focus management could be improved
 - Entire deployment process is missing, i.e. Dockerfiles, CI/CD, reverse proxy

client/src/components/ChatMessage/ChatMessageDisplay.tsx

@@ -39,7 +39,7 @@ function ChatMessageDisplay({
   return (
     <article
       key={message.id}
-      className={`${isOwn ? "ml-auto" : "mr-auto"}`}
+      className={`m-2 ${isOwn ? "ml-auto" : "mr-auto"}`}
       aria-label={`Message from ${message.author.name} on ${timestamp}`}
     >
       <MessageHeader

client/src/components/Layout.tsx

@@ -5,11 +5,11 @@ interface LayoutProps {
 function Layout({ children }: LayoutProps) {
   return (
     <>
-      <main className="min-h-screen p-4">
+      <main className="min-h-screen p-1 sm:p-4">
         <header className="top-0 w-full bg-white" role="banner">
-          <h1 className="text-3xl text-center">Simple Chat</h1>
+          <h1 className="text-3xl text-center mb-3">Simple Chat</h1>
         </header>
-        <div className="max-w-2xl md:p-8 m-auto" role="main">
+        <div className="max-w-2xl m-auto" role="main">
           {children}
         </div>
       </main>

client/src/components/MessageDisplay.tsx

@@ -37,9 +37,9 @@ function MessageDisplay({ sendMessage }: MessageDisplayProps) {
     sendMessage(editMessage);
   };
 
-  // Scroll to bottom when messages change
   useEffect(() => {
     if (listRef.current) {
+      // Scroll to bottom when messages change
       listRef.current.scrollToItem(state.messages.length - 1);
     }
   }, [state.messages]);
@@ -83,7 +83,7 @@ function MessageDisplay({ sendMessage }: MessageDisplayProps) {
   };
 
   return (
-    <div className="h-[calc(100vh-theme('spacing.48'))]">
+    <div className="h-[calc(100vh-theme('spacing.64'))]">
       <AutoSizer>
         {({ height, width }) => (
           <List

client/src/components/RoomHeader.tsx

@@ -13,7 +13,9 @@ function RoomHeader(props: RoomHeaderProps) {
     <h2 className="text-xl bg-gray-100 p-4 flex justify-between items-center">
       <span className="font-medium">Room ID: {props.roomId}</span>
       {state.currentUser && (
-        <span className="font-medium">User: {state.currentUser?.name}</span>
+        <span className="font-medium hidden sm:block">
+          User: {state.currentUser?.name}
+        </span>
       )}
       <span
         className={`px-3 py-1 text-sm font-medium rounded-xl ${