Refactor: Limit avatar upload size

src/components/settings/AccountProfileTab.tsx

@@ -154,6 +154,7 @@ export function AccountProfileTab() {
         <PhotoUpload
           variant="avatar"
           maxFiles={1}
+          maxSizeMB={1}
           existingPhotos={avatarUrl ? [avatarUrl] : []}
           onUploadComplete={handleAvatarUpload}
           currentImageId={avatarImageId}

src/components/upload/PhotoUpload.tsx

@@ -25,6 +25,7 @@ interface PhotoUploadProps {
   variant?: 'default' | 'compact' | 'avatar';
   accept?: string;
   currentImageId?: string; // For cleanup of existing image
+  maxSizeMB?: number; // Custom max file size in MB
 }
 
 interface UploadedImage {
@@ -43,7 +44,8 @@ export function PhotoUpload({
   className,
   variant = 'default',
   accept = 'image/jpeg,image/png,image/webp',
-  currentImageId
+  currentImageId,
+  maxSizeMB = 10 // Default 10MB, but can be overridden
 }: PhotoUploadProps) {
   const [uploadedImages, setUploadedImages] = useState<UploadedImage[]>([]);
   const [uploading, setUploading] = useState(false);
@@ -59,10 +61,10 @@ export function PhotoUpload({
   const canUploadMore = totalImages < actualMaxFiles;
 
   const validateFile = (file: File): string | null => {
-    // Check file size (10MB limit)
-    const maxSize = 10 * 1024 * 1024;
+    // Check file size using configurable limit
+    const maxSize = maxSizeMB * 1024 * 1024;
     if (file.size > maxSize) {
-      return 'File size must be less than 10MB';
+      return `File size must be less than ${maxSizeMB}MB`;
     }
 
     // Check file type
@@ -307,7 +309,7 @@ export function PhotoUpload({
               {uploadedImages.length > 0 || existingPhotos.length > 0 ? 'Change Avatar' : 'Upload Avatar'}
             </Button>
             <p className="text-xs text-muted-foreground">
-              JPEG, PNG, WebP up to 10MB
+              JPEG, PNG, WebP up to {maxSizeMB}MB
             </p>
           </div>
         </div>
@@ -372,9 +374,9 @@ export function PhotoUpload({
                 </p>
                 <p className="text-sm text-muted-foreground">
                   {isAvatar ? (
-                    <>Drag & drop or click to browse<br />JPEG, PNG, WebP up to 10MB</>
+                    <>Drag & drop or click to browse<br />JPEG, PNG, WebP up to {maxSizeMB}MB</>
                   ) : canUploadMore ? (
-                    <>Drag & drop or click to browse<br />JPEG, PNG, WebP up to 10MB each</>
+                    <>Drag & drop or click to browse<br />JPEG, PNG, WebP up to {maxSizeMB}MB each</>
                   ) : (
                     `Maximum ${actualMaxFiles} ${actualMaxFiles === 1 ? 'photo' : 'photos'} allowed`
                   )}

src/pages/Profile.tsx

@@ -349,7 +349,7 @@ export default function Profile() {
             <CardContent className="p-8">
               <div className="flex flex-col md:flex-row gap-6">
                 <div className="flex flex-col items-center md:items-start">
-                  <PhotoUpload variant="avatar" maxFiles={1} existingPhotos={profile.avatar_url ? [profile.avatar_url] : []} onUploadComplete={handleAvatarUpload} currentImageId={avatarImageId} onError={error => {
+                  <PhotoUpload variant="avatar" maxFiles={1} maxSizeMB={1} existingPhotos={profile.avatar_url ? [profile.avatar_url] : []} onUploadComplete={handleAvatarUpload} currentImageId={avatarImageId} onError={error => {
                   toast({
                     title: "Upload Error",
                     description: error,