diff --git a/web/src/components/avatar-upload.tsx b/web/src/components/avatar-upload.tsx
index a6a8c4e58..805e476a1 100644
--- a/web/src/components/avatar-upload.tsx
+++ b/web/src/components/avatar-upload.tsx
@@ -287,7 +287,9 @@ export const AvatarUpload = forwardRef<HTMLInputElement, AvatarUploadProps>(
               variant="dashed"
               size="icon"
               className="size-16 flex flex-col items-center gap-1 !bg-transparent"
-              onClick={() => {
+              type="button"
+              onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+                e.stopPropagation();
                 innerInputRef.current?.click();
               }}
             >
@@ -299,8 +301,10 @@ export const AvatarUpload = forwardRef<HTMLInputElement, AvatarUploadProps>(
               <Button
                 variant="transparent"
                 size="icon"
+                type="button"
                 className="group/button size-full p-0 transition-all relative gap-0 overflow-hidden"
-                onClick={() => {
+                onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+                  e.stopPropagation();
                   innerInputRef.current?.click();
                 }}
               >
diff --git a/web/src/components/ui/avatar.tsx b/web/src/components/ui/avatar.tsx
index 567b9e006..a78a94c64 100644
--- a/web/src/components/ui/avatar.tsx
+++ b/web/src/components/ui/avatar.tsx
@@ -86,7 +86,7 @@ export const AvatarGroup = ({
         return (
           <div key={index} className="-ml-2 hover:z-10 relative">
             {React.cloneElement(avatar as React.ReactElement<AvatarProps>, {
-              className: 'ring-2 ring-background',
+              className: cn('ring-2 ring-background', avatar.props.className),
             })}
           </div>
         );