Fix input/message alignment on wide screens

- Add max-width 800px to message list and input area
- Center align both components for consistent layout
- Wrap input in container for full-width background

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/components/ChatRoom.css

@@ -124,6 +124,11 @@
   overflow: hidden;
 }
 
+.input-area {
+  background: #16213e;
+  border-top: 1px solid #0f3460;
+}
+
 @media (max-width: 768px) {
   .user-list {
     display: none;

frontend/src/components/ChatRoom.tsx

@@ -169,7 +169,9 @@ function ChatRoom({ roomId, userName, onLeave }: ChatRoomProps) {
 
         <main className="messages-container">
           <MessageList messages={messages} />
+          <div className="input-area">
             <MessageInput onSend={handleSendMessage} disabled={!isConnected} />
+          </div>
         </main>
       </div>
     </div>

frontend/src/components/MessageInput.css

@@ -2,8 +2,10 @@
   display: flex;
   gap: 12px;
   padding: 16px;
-  background: #16213e;
-  border-top: 1px solid #0f3460;
+  max-width: 800px;
+  margin: 0 auto;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .message-input .input-wrapper {

frontend/src/components/MessageList.css

@@ -5,6 +5,10 @@
   display: flex;
   flex-direction: column;
   gap: 12px;
+  max-width: 800px;
+  margin: 0 auto;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .empty-state {