From de97d0552894a33f2b15dd232598c40335d941a4 Mon Sep 17 00:00:00 2001
From: molvqingtai <molvqingtai@gmail.com>
Date: Thu, 10 Oct 2024 05:13:01 +0800
Subject: [PATCH] fix: avatar is not displayed completely

---
 src/app/content/components/DanmakuMessage.tsx |  2 +-
 src/app/content/components/MessageItem.tsx    |  2 +-
 src/app/content/components/PromptItem.tsx     |  4 +-
 src/app/content/views/Setup/index.tsx         |  2 +-
 src/app/options/components/AvatarSelect.tsx   |  2 +-
 src/app/options/components/ProfileForm.tsx    | 42 ++++++++++++-------
 6 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/src/app/content/components/DanmakuMessage.tsx b/src/app/content/components/DanmakuMessage.tsx
index 29dd371..6b0a623 100644
--- a/src/app/content/components/DanmakuMessage.tsx
+++ b/src/app/content/components/DanmakuMessage.tsx
@@ -34,7 +34,7 @@ const DanmakuMessage: FC<PromptItemProps> = ({ data, className, onMouseEnter, on
       )}
     >
       <Avatar className="size-5">
-        <AvatarImage src={data.userAvatar} alt="avatar" />
+        <AvatarImage src={data.userAvatar} className="size-full" alt="avatar" />
         <AvatarFallback>{data.username.at(0)}</AvatarFallback>
       </Avatar>
       <div className="max-w-40 overflow-hidden text-ellipsis">{data.body}</div>
diff --git a/src/app/content/components/MessageItem.tsx b/src/app/content/components/MessageItem.tsx
index 30d665d..f9e8b4e 100644
--- a/src/app/content/components/MessageItem.tsx
+++ b/src/app/content/components/MessageItem.tsx
@@ -32,7 +32,7 @@ const MessageItem: FC<MessageItemProps> = (props) => {
       className={cn('box-border grid grid-cols-[auto_1fr] gap-x-2 px-4  first:pt-4 last:pb-4', props.className)}
     >
       <Avatar>
-        <AvatarImage src={props.data.userAvatar} alt="avatar" />
+        <AvatarImage src={props.data.userAvatar} className="size-full" alt="avatar" />
         <AvatarFallback>{props.data.username.at(0)}</AvatarFallback>
       </Avatar>
       <div className="overflow-hidden">
diff --git a/src/app/content/components/PromptItem.tsx b/src/app/content/components/PromptItem.tsx
index aaa1022..7ae1518 100644
--- a/src/app/content/components/PromptItem.tsx
+++ b/src/app/content/components/PromptItem.tsx
@@ -13,9 +13,9 @@ export interface PromptItemProps {
 const PromptItem: FC<PromptItemProps> = ({ data, className }) => {
   return (
     <div className={cn('flex justify-center py-1 px-4', className)}>
-      <Badge variant="secondary" className="gap-x-2 rounded-full  font-medium text-slate-400">
+      <Badge variant="secondary" className="gap-x-2 rounded-full px-2 font-medium text-slate-400">
         <Avatar className="size-4">
-          <AvatarImage src={data.userAvatar} alt="avatar" />
+          <AvatarImage src={data.userAvatar} className="size-full" alt="avatar" />
           <AvatarFallback>{data.username.at(0)}</AvatarFallback>
         </Avatar>
         {data.body}
diff --git a/src/app/content/views/Setup/index.tsx b/src/app/content/views/Setup/index.tsx
index f8bafac..b6d01aa 100644
--- a/src/app/content/views/Setup/index.tsx
+++ b/src/app/content/views/Setup/index.tsx
@@ -104,7 +104,7 @@ const Setup: FC = () => {
       <div className="m-auto flex flex-col items-center justify-center gap-y-8 pb-40 drop-shadow-lg">
         <BlurFade key={userInfo?.avatar} inView>
           <Avatar className="size-24 cursor-pointer border-4 border-white ">
-            <AvatarImage src={userInfo?.avatar} alt="avatar" />
+            <AvatarImage src={userInfo?.avatar} className="size-full" alt="avatar" />
             <AvatarFallback>
               <UserIcon size={30} className="text-slate-400" />
             </AvatarFallback>
diff --git a/src/app/options/components/AvatarSelect.tsx b/src/app/options/components/AvatarSelect.tsx
index acb599d..3291e53 100644
--- a/src/app/options/components/AvatarSelect.tsx
+++ b/src/app/options/components/AvatarSelect.tsx
@@ -58,7 +58,7 @@ const AvatarSelect = React.forwardRef<HTMLInputElement, AvatarSelectProps>(
             className
           )}
         >
-          <AvatarImage src={value} alt="avatar" />
+          <AvatarImage src={value} className="size-full" alt="avatar" />
           <AvatarFallback>
             <ImagePlusIcon size={30} className="text-slate-400 group-hover:text-slate-500" />
           </AvatarFallback>
diff --git a/src/app/options/components/ProfileForm.tsx b/src/app/options/components/ProfileForm.tsx
index bbf5eeb..cf92a43 100644
--- a/src/app/options/components/ProfileForm.tsx
+++ b/src/app/options/components/ProfileForm.tsx
@@ -92,31 +92,43 @@ const ProfileForm = () => {
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(handleSubmit)} autoComplete="off" className="relative w-[450px] space-y-8 p-14">
+      <form
+        onSubmit={form.handleSubmit(handleSubmit)}
+        autoComplete="off"
+        className="relative w-[450px] space-y-8 p-14 pt-20"
+      >
         <FormField
           control={form.control}
           name="avatar"
           render={({ field }) => (
-            <FormItem className="absolute inset-x-1 top-0 mx-auto grid w-fit -translate-y-1/2  justify-items-center">
+            <FormItem className="absolute inset-x-1 top-0 mx-auto grid w-fit -translate-y-1/3  justify-items-center">
               <FormControl>
-                <BlurFade key={form.getValues().avatar} duration={0.1}>
-                  <AvatarSelect
-                    compressSize={MAX_AVATAR_SIZE}
-                    onError={handleError}
-                    onWarning={handleWarning}
-                    className="shadow-lg"
-                    {...field}
-                  ></AvatarSelect>
-                </BlurFade>
+                <div className="flex flex-col items-center gap-2">
+                  <BlurFade key={form.getValues().avatar} duration={0.1}>
+                    <AvatarSelect
+                      compressSize={MAX_AVATAR_SIZE}
+                      onError={handleError}
+                      onWarning={handleWarning}
+                      className="shadow-lg"
+                      {...field}
+                    ></AvatarSelect>
+                  </BlurFade>
+                  <Button
+                    type="button"
+                    size="xs"
+                    className="mx-auto flex items-center gap-x-2"
+                    onClick={handleRefreshAvatar}
+                  >
+                    <RefreshCcwIcon size={14} />
+                    Ugly Avatar
+                  </Button>
+                </div>
               </FormControl>
               <FormMessage />
             </FormItem>
           )}
         />
-        <Button type="button" size="xs" className="mx-auto flex items-center gap-x-2" onClick={handleRefreshAvatar}>
-          <RefreshCcwIcon size={14} />
-          Ugly Avatar
-        </Button>
+
         <FormField
           control={form.control}
           name="name"