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
-            user={{ name: user.name, email: user.email, profileImageKey: user.profileImageKey }}
-            currentAvatarUrl={avatarUrl}
-            onUploadComplete={() => refetch()}
-          >
-            <div className="cursor-pointer">
-              <UserAvatar
-                user={{ name: user.name, email: user.email }}
-                avatarUrl={avatarUrl}
-                size="xl"
-                showEditOverlay
-              />
-            </div>
-          </AvatarUpload>
+          <div className="flex items-center gap-4">
+            <UserAvatar
+              user={{ name: user.name, email: user.email }}
+              avatarUrl={avatarUrl}
+              size="xl"
+            />
+            <AvatarUpload
+              user={{ name: user.name, email: user.email, profileImageKey: user.profileImageKey }}
+              currentAvatarUrl={avatarUrl}
+              onUploadComplete={() => refetch()}
+            >
+              <Button variant="outline" size="sm">
+                <Camera className="mr-2 h-4 w-4" />
+                Change Photo
+              </Button>
+            </AvatarUpload>
+          </div>
         </CardContent>
       </Card>