fix: improve file size handling and error messages

- Reduce server-side limit to 5MB for upload endpoint
- Increase client-side resizing threshold to 4MB
- Add specific error handling for 413 responses
- Add more detailed logging for file sizes
- Improve user error messages

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>

api/src/rehearsalhub/routers/auth.py

@@ -91,13 +91,13 @@ async def upload_avatar(
             detail="Only image files are allowed"
         )
     
-    # Validate file size (10MB limit)
+    # Validate file size (5MB limit for upload endpoint)
-    max_size = 10 * 1024 * 1024  # 10MB
+    max_size = 5 * 1024 * 1024  # 5MB
     if file.size > max_size:
         print(f"File too large: {file.size} bytes (max {max_size})")
         raise HTTPException(
             status_code=status.HTTP_413_REQUEST_ENTITY_TOO_LARGE,
-            detail=f"File too large. Maximum size is {max_size / 1024 / 1024}MB"
+            detail=f"File too large. Maximum size is {max_size / 1024 / 1024}MB. Please resize your image and try again."
         )
     
     # Create uploads directory if it doesn't exist

web/src/pages/SettingsPage.tsx

@@ -198,7 +198,7 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
                 
                 try {
                   // Check file size and resize if needed
-                  const maxSize = 2 * 1024 * 1024; // 2MB
+                  const maxSize = 4 * 1024 * 1024; // 4MB (more conservative to account for base64 overhead)
                   let processedFile = file;
                   
                   if (file.size > maxSize) {
@@ -210,14 +210,23 @@ function SettingsForm({ me, onBack }: { me: MemberRead; onBack: () => void }) {
                   formData.append('file', processedFile, processedFile.name || file.name);
                   
                   console.log("Uploading file to /auth/me/avatar");
-                  const response = await api.post<MemberRead>('/auth/me/avatar', formData);
+                  console.log("Final file size:", processedFile.size);
+                  const response = await api.post<MemberRead>('/auth/me/avatar', formData, {
+                    headers: {
+                      'Content-Type': 'multipart/form-data'
+                    }
+                  });
                   console.log("Upload response:", response);
                   
                   setAvatarUrl(response.avatar_url || '');
                   qc.invalidateQueries({ queryKey: ['me'] });
                 } catch (err) {
                   console.error("Upload failed:", err);
-                  setError(err instanceof Error ? err.message : 'Failed to upload avatar');
+                  if (err instanceof Error && err.message.includes('413')) {
+                    setError('File too large. Maximum size is 5MB. Please choose a smaller image.');
+                  } else {
+                    setError(err instanceof Error ? err.message : 'Failed to upload avatar');
+                  }
                 } finally {
                   setUploading(false);
                 }