From 7ff961f0c299206a95f210bbcd4c64b8ff2dba08 Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Fri, 30 Jan 2026 20:08:59 +0100
Subject: [PATCH] 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 | 33 +++++++++++---------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/app/(settings)/settings/profile/page.tsx b/src/app/(settings)/settings/profile/page.tsx
index 3124b50..8cd4ef2 100644
--- a/src/app/(settings)/settings/profile/page.tsx
+++ b/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>