misc: final touches to layout

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 ${