From 317a9ad6e83b43fe140ac99df04c258685aeca14 Mon Sep 17 00:00:00 2001
From: Aditya948351 <devpathind.community@gmail.com>
Date: Sun, 17 May 2026 17:31:09 +0530
Subject: [PATCH 1/2] fix(profile): resolve circular profile image upload
 distortion and layout overflow

---
 src/components/profile/UserProfile.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/profile/UserProfile.tsx b/src/components/profile/UserProfile.tsx
index d1ec59ab..a9bea58e 100644
--- a/src/components/profile/UserProfile.tsx
+++ b/src/components/profile/UserProfile.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";
 
 import { useState, useEffect } from 'react';
 import { useAuth } from '@/context/AuthContext';
@@ -257,15 +257,17 @@ export default function UserProfile() {
                 <aside className="lg:col-span-1 space-y-6">
                     {/* Profile Card */}
                     <div className="flex flex-col items-center lg:items-start text-center lg:text-left">
-                        <div className="relative w-64 h-64 md:w-72 md:h-72 lg:w-full lg:h-auto lg:aspect-square mb-4 group">
-                            <img
-                                src={user.photoURL || `https://ui-avatars.com/api/?name=${user.name}&background=random`}
-                                alt={user.name || 'User'}
-                                className="w-full h-full object-cover rounded-full border-4 border-card shadow-xl"
-                            />
+                        <div className="relative w-64 h-64 md:w-72 md:h-72 lg:w-full lg:aspect-square mb-4 group">
+                            <div className="w-full h-full rounded-full overflow-hidden border-4 border-card shadow-xl">
+                                <img
+                                    src={user.photoURL || `https://ui-avatars.com/api/?name=${user.name}&background=random`}
+                                    alt={user.name || 'User'}
+                                    className="w-full h-full object-cover"
+                                />
+                            </div>
                             <button
                                 onClick={() => setIsEditingPhoto(!isEditingPhoto)}
-                                className="absolute bottom-4 right-4 p-2 bg-card text-foreground rounded-full border border-border shadow-md hover:bg-muted transition-colors opacity-0 group-hover:opacity-100"
+                                className="absolute bottom-2 right-2 md:bottom-4 md:right-4 p-2 bg-card text-foreground rounded-full border border-border shadow-md hover:bg-muted transition-colors opacity-0 group-hover:opacity-100 z-10"
                                 title="Change Avatar"
                             >
                                 <Camera size={18} />

From d89486c424238c1e7244fb752036b8c4435344dd Mon Sep 17 00:00:00 2001
From: DevPath - India's Developer Growth Community
 <250155156+devpathindcommunity-india@users.noreply.github.com>
Date: Sun, 17 May 2026 17:32:13 +0530
Subject: [PATCH 2/2] Potential fix for pull request finding

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
---
 src/components/profile/UserProfile.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/profile/UserProfile.tsx b/src/components/profile/UserProfile.tsx
index a9bea58e..41a22e6f 100644
--- a/src/components/profile/UserProfile.tsx
+++ b/src/components/profile/UserProfile.tsx
@@ -257,7 +257,7 @@ export default function UserProfile() {
                 <aside className="lg:col-span-1 space-y-6">
                     {/* Profile Card */}
                     <div className="flex flex-col items-center lg:items-start text-center lg:text-left">
-                        <div className="relative w-64 h-64 md:w-72 md:h-72 lg:w-full lg:aspect-square mb-4 group">
+                        <div className="relative w-64 h-64 md:w-72 md:h-72 lg:w-full lg:h-auto lg:aspect-square mb-4 group">
                             <div className="w-full h-full rounded-full overflow-hidden border-4 border-card shadow-xl">
                                 <img
                                     src={user.photoURL || `https://ui-avatars.com/api/?name=${user.name}&background=random`}