refactor(frontend): implement mobile-first layout for chat pages

- Add fullWidth prop to Layout component for chat pages
- Redesign EventChatPage and MatchChatPage with fixed layout:
  - Navbar sticky to top (no gaps)
  - Event/partner header directly below navbar
  - Chat content fills available space (flex-1)
  - Input area fixed to bottom
  - Full screen width on mobile (no margins)
- Translate RecordingTab UI strings to English
- Move Leave Event button to header
- Remove unnecessary margins and max-width constraints

This provides a better mobile experience with full-screen chat
interface similar to native messaging apps.

frontend/src/pages/EventChatPage.jsx

@@ -352,11 +352,10 @@ const EventChatPage = () => {
   }
 
   return (
-    <Layout>
-      <div className="max-w-6xl mx-auto">
-        <div className="bg-white rounded-lg shadow-md overflow-hidden">
-          {/* Header */}
-          <div className="bg-primary-600 text-white p-4">
+    <Layout fullWidth>
+      <div className="flex flex-col h-[calc(100vh-64px)] bg-white">
+        {/* Header */}
+        <div className="bg-primary-600 text-white p-4">
             <div className="flex items-start justify-between">
               <div className="flex-1">
                 <h2 className="text-2xl font-bold">{event.name}</h2>
@@ -379,15 +378,24 @@ const EventChatPage = () => {
                   )}
                 </div>
               </div>
-              {myHeats.length > 0 && (
+              <div className="flex items-center gap-2">
+                {myHeats.length > 0 && (
+                  <button
+                    onClick={() => setShowHeatsModal(true)}
+                    className="flex items-center gap-2 px-3 py-2 bg-primary-700 hover:bg-primary-800 rounded-md transition-colors text-sm"
+                  >
+                    <Edit2 className="w-4 h-4" />
+                    Edit Heats
+                  </button>
+                )}
                 <button
-                  onClick={() => setShowHeatsModal(true)}
-                  className="flex items-center gap-2 px-3 py-2 bg-primary-700 hover:bg-primary-800 rounded-md transition-colors text-sm"
+                  onClick={() => setShowLeaveModal(true)}
+                  className="flex items-center gap-2 px-3 py-2 bg-red-600 hover:bg-red-700 rounded-md transition-colors text-sm"
+                  title="Leave Event"
                 >
-                  <Edit2 className="w-4 h-4" />
-                  Edit Heats
+                  <LogOut size={16} />
                 </button>
-              )}
+              </div>
             </div>
           </div>
 
@@ -401,9 +409,9 @@ const EventChatPage = () => {
             />
           )}
 
-          {/* Tab Navigation */}
-          <div className="border-b bg-gray-50">
-            <nav className="flex">
+        {/* Tab Navigation */}
+        <div className="border-b bg-gray-50">
+          <nav className="flex">
               <button
                 onClick={() => setActiveTab('chat')}
                 className={`flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
@@ -424,7 +432,7 @@ const EventChatPage = () => {
                 }`}
               >
                 <Users className="w-4 h-4" />
-                Uczestnicy
+                Participants
                 <span className="ml-1 px-1.5 py-0.5 text-xs bg-gray-200 text-gray-600 rounded-full">
                   {checkedInUsers.length}
                 </span>
@@ -438,15 +446,16 @@ const EventChatPage = () => {
                 }`}
               >
                 <Video className="w-4 h-4" />
-                Nagrywanie
+                Recording
               </button>
-            </nav>
-          </div>
+          </nav>
+        </div>
 
-          <div className="h-[calc(100vh-340px)]">
-            {/* Chat Tab */}
-            {activeTab === 'chat' && (
-              <div className="flex h-full">
+        {/* Content Area - flex-1 fills remaining space */}
+        <div className="flex-1 flex flex-col overflow-hidden">
+          {/* Chat Tab */}
+          {activeTab === 'chat' && (
+            <div className="flex h-full">
                 {/* Sidebar - visible only on chat tab on larger screens */}
                 <div className="hidden lg:block">
                   <ParticipantsSidebar
@@ -511,19 +520,8 @@ const EventChatPage = () => {
                 myHeats={myHeats}
               />
             )}
-          </div>
-
-          {/* Leave Event Button */}
-          <div className="mt-4 flex justify-center">
-            <button
-              onClick={() => setShowLeaveModal(true)}
-              className="flex items-center gap-2 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors font-medium"
-            >
-              <LogOut size={16} />
-              Leave Event
-            </button>
-          </div>
         </div>
+      </div>
 
         <ConfirmationModal
           isOpen={showLeaveModal}
@@ -551,7 +549,6 @@ const EventChatPage = () => {
             existingCompetitorNumber={myCompetitorNumber}
           />
         </Modal>
-      </div>
     </Layout>
   );
 };

frontend/src/pages/MatchChatPage.jsx

@@ -213,11 +213,10 @@ const MatchChatPage = () => {
   }
 
   return (
-    <Layout>
-      <div className="max-w-4xl mx-auto">
-        <div className="bg-white rounded-lg shadow-md overflow-hidden">
-          {/* Header with Partner Info */}
-          <div className="bg-primary-600 text-white p-4">
+    <Layout fullWidth>
+      <div className="flex flex-col h-[calc(100vh-64px)] bg-white">
+        {/* Header with Partner Info */}
+        <div className="bg-primary-600 text-white p-4">
             <div className="flex items-center justify-between">
               <div className="flex items-center space-x-4">
                 <Link to={`/${partner.username}`} className="flex-shrink-0">
@@ -256,8 +255,8 @@ const MatchChatPage = () => {
             </div>
           </div>
 
-          {/* WebRTC Status Bar */}
-          <div className="bg-gray-50 border-b px-4 py-2 flex items-center justify-between">
+        {/* WebRTC Status Bar */}
+        <div className="bg-gray-50 border-b px-4 py-2 flex items-center justify-between">
             <div className="flex items-center space-x-2">
               <div className={`w-2 h-2 rounded-full ${connectionState === CONNECTION_STATE.CONNECTED ? 'bg-green-500' : 'bg-gray-300'}`} />
               <span className={`text-sm font-medium ${getWebRTCStatusColor()}`}>
@@ -273,22 +272,23 @@ const MatchChatPage = () => {
               <span className="text-xs text-gray-500">
                 {connectionState === CONNECTION_STATE.CONNECTED ? 'E2E Encrypted (DTLS)' : 'WebRTC P2P Ready'}
               </span>
-            </div>
           </div>
+        </div>
 
-          <div className="flex flex-col h-[calc(100vh-320px)]">
-            {/* WebRTC Warning */}
-            {webrtcDetection && (
-              <div className="p-4 pb-0">
-                <WebRTCWarning detection={webrtcDetection} />
-              </div>
-            )}
+        {/* Content Area - flex-1 fills remaining space */}
+        <div className="flex-1 flex flex-col overflow-hidden">
+          {/* WebRTC Warning */}
+          {webrtcDetection && (
+            <div className="p-4 pb-0">
+              <WebRTCWarning detection={webrtcDetection} />
+            </div>
+          )}
 
-            <ChatMessageList
-              messages={messages}
-              currentUserId={user.id}
-              messagesEndRef={messagesEndRef}
-            />
+          <ChatMessageList
+            messages={messages}
+            currentUserId={user.id}
+            messagesEndRef={messagesEndRef}
+          />
 
             <FileTransferProgress
               file={selectedFile}
@@ -350,18 +350,8 @@ const MatchChatPage = () => {
                 disabled={!isConnected}
                 placeholder="Write a message..."
               />
-            </div>
           </div>
         </div>
-
-        {/* Info Box */}
-        <div className="mt-4 p-4 bg-green-50 border border-green-200 rounded-lg">
-          <p className="text-sm text-green-800">
-            <strong>🚀 WebRTC P2P File Transfer Active!</strong> Videos are transferred directly between users via
-            RTCDataChannel with 16KB chunking and real-time progress monitoring. The server is only used for
-            SDP/ICE exchange (signaling). Connection is end-to-end encrypted (DTLS).
-          </p>
-        </div>
       </div>
     </Layout>
   );