Fix profile photo section: replace hover overlay with button

Remove showEditOverlay that stretched across the full width.
Show avatar and a "Change Photo" button side by side instead.

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

src/app/(settings)/settings/profile/page.tsx

@@ -155,24 +155,27 @@ export default function ProfileSettingsPage() {
             Profile Photo
           </CardTitle>
           <CardDescription>
-            Click your avatar to upload a new profile picture
+            Click the button below to upload a new profile picture
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <AvatarUpload
+          <div className="flex items-center gap-4">
-            user={{ name: user.name, email: user.email, profileImageKey: user.profileImageKey }}
+            <UserAvatar
-            currentAvatarUrl={avatarUrl}
+              user={{ name: user.name, email: user.email }}
-            onUploadComplete={() => refetch()}
+              avatarUrl={avatarUrl}
-          >
+              size="xl"
-            <div className="cursor-pointer">
+            />
-              <UserAvatar
+            <AvatarUpload
-                user={{ name: user.name, email: user.email }}
+              user={{ name: user.name, email: user.email, profileImageKey: user.profileImageKey }}
-                avatarUrl={avatarUrl}
+              currentAvatarUrl={avatarUrl}
-                size="xl"
+              onUploadComplete={() => refetch()}
-                showEditOverlay
+            >
-              />
+              <Button variant="outline" size="sm">
-            </div>
+                <Camera className="mr-2 h-4 w-4" />
-          </AvatarUpload>
+                Change Photo
+              </Button>
+            </AvatarUpload>
+          </div>
         </CardContent>
       </Card>